reactjs - Argumento do tipo 'Response' não é atribuível ao parâmetro do tipo 'SetStateAction'

Esta é a minha interface CommentResponse, que é a estrutura de um objeto dentro do array da resposta da API

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

Ao definir os dados da resposta da API usando setAllComments (hook useState), estou recebendo o seguinte erro

/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);
  };

Eu visitei outros links do StackOverflow e do Google, mas não consegui obter a solução

Resposta #1

Parece que comments é um objeto Response. Para extrair o valor dele, você precisará chamar .json() nele.

Parece que o genérico de .json foi removido, então você terá que usar uma asserção de tipo:

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

Resposta #2

No seu caso, a resposta do fetch está retornando um objeto do tipo Object que possui valores como Response {type: "cors", url: "https://jsonplaceholder.typicode.com/comments", redirected: false, status: 200…}

coloque sua interface no lugar certo :

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

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

setAllComments(result);

você pode usar ambos os tipos result:Array<CommentResponse> ou result:CommentResponse[].

verifique a demonstração do código aqui para fetch e axios.