Argument of type 'Response' is not assignable to parameter of type 'SetStateAction`

Question

This is my CommentResponse interface, which is the structure of an object inside the array from API response

interface CommentResponse {
  body: string;
  email: string;
  id: number;
  name: string;
  postId: number;
}

While setting the data from the API response using setAllComments (useState-hook), I'm getting the following error

/typescript-demo/src/components/Dashboard/index.tsx
TypeScript error in /typescript-demo/src/components/Dashboard/index.tsx(35,20):
Argument of type 'Response' is not assignable to parameter of type 'SetStateAction<CommentResponse[]>'.
  Type 'Response' is missing the following properties from type 'CommentResponse[]': length, pop, push, concat, and 28 more.  TS2345
    32 |     comments = await comments.json();
    33 |     console.log(comments);
    34 |     // comments = await JSON.parse(comments);
  > 35 |     setAllComments(comments);
       |                    ^
    36 |   };
    37 | 
    38 |   useEffect(() => {

@RajaJaganathan

const [allComments, setAllComments] = useState<CommentResponse[]>([]);

  const commentService = async () => {
    const COMMENTS_API = `https://jsonplaceholder.typicode.com/comments`;    
    let comments = await fetch<Array<CommentResponse>>(COMMENTS_API);

    comments = await comments.json();
    console.log(comments);

    setAllComments(comments);
  };

I visited other StackOverflow & Google links, but couldn't get the solution

Can you show your useState code too ? – Raja Jaganathan Nov 25 '20 at 15:48 — Raja Jaganathan, Nov 25 '20 at 15:48
@RajaJaganathan , I've edited above, please check! – Yogendra Nov 26 '20 at 06:37 — Yogendra, Nov 26 '20 at 06:37

CertainPerformance · Answer 1 · 2020-11-25T15:50:08.270

2

It sounds like comments is a Response object. To extract the value from it, you'll need to call .json() on it.

It looks like the generic from .json was removed, so you'll have to use type assertion:

fetch('some-api')
  .then(res => res.json())
  .then(comments => setAllComments(comments as Array<CommentResponse>))
  .catch(handleErrors);

edited Nov 25 '20 at 15:50

answered Nov 25 '20 at 15:17

CertainPerformance

356,069
52
309
320

Thanks, but I get this error now- ``` Expected 0 type arguments, but got 1. TS2558 30 | let comments = await fetch(COMMENTS_API); 31 | > 32 | comments = await comments.json>(); | ^ 33 | console.log(comments); 34 | // comments = await JSON.parse(comments); 35 | // setAllComments(comments); ``` – Yogendra Nov 25 '20 at 15:21
Could you please tell me how to convert Promise object into an array using async/await? comments = await comments.json>(); this is throwing this error - Expected 0 type arguments, but got 1. – Yogendra Nov 25 '20 at 15:24
This is throwing error because CommentResponse interface doesn't expect any argument – Yogendra Nov 25 '20 at 15:27
I took [this](https://stackoverflow.com/questions/41103360/how-to-use-fetch-in-typescript) for granted, looks like I'm doing something wrong somewhere, one sec... – CertainPerformance Nov 25 '20 at 15:35
Conversion of type 'Response' to type 'CommentResponse[]' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first. This is what I'm getting now :( – Yogendra Nov 26 '20 at 06:48
That error should not occur with the code in my answer - the only Response expression is the `res`, which never gets converted to `Array`. Make sure you're using `.then(res => res.json()).then(comments => setAllComments(comments as Array))` exactly. – CertainPerformance Nov 26 '20 at 14:44

Jagannath Swarnkar · Accepted Answer · 2020-11-26T08:22:21.617

In your case response from fetch it is returning an object with Object type which has values as Response {type: "cors", url: "https://jsonplaceholder.typicode.com/comments", redirected: false, status: 200…}

get your interface at right place :

const COMMENTS_API = `https://jsonplaceholder.typicode.com/comments`;    
let comments =  await fetch(COMMENTS_API);

let result: Array<CommentResponse> = await comments.json();

setAllComments(result);

you can use both type result:Array<CommentResponse> or result:CommentResponse[].

check code demo here for both fetch and axios.

Argument of type 'Response' is not assignable to parameter of type 'SetStateAction`

2 Answers2