如何设置反应打字稿useState获取类型和使用地图方法答案

【问题标题】：how to set react typescript useState fetch type and using map method如何设置反应打字稿useState获取类型和使用地图方法
【发布时间】：2020-07-24 06:47:48
【问题描述】：

目前我正在练习 react-ts 通过 async fetcher 获取 json 数据

示例代码如下所示

//Test.tsx
import React, { useState, useEffect } from 'react';
import fetcher from 'api/fetcher';

interface Todo {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
}

const Test: React.FC = () => {
  const [data, setData] = useState<Todo[]| Promise<Todo[]>>([{
    userId: 1,
    id: 1234,
    title: "test",
    completed: false
  }]);

  useEffect(() => {
    const result = fetcher("https://jsonplaceholder.typicode.com/todos");
    setData(result);
    console.log(result);
  }, [])
  return (
    <div>
      //error in here
      **{data && data.map()}**
        {/* {data && data.map((item: Todo)=> {
          <div>{item.id}<div>
        })} */}
  </div>
  );
}
export default Test;

//fetcher.ts
async function fetcher(url: RequestInfo) {
  try {
    const res = await fetch(url);
    const json = await res.json();
    console.log("json: ", json);
    return json;
  } catch (e) {
    throw e;
  }
}

export default fetcher;

错误信息：类型 'Todo[] 上不存在属性 'map' |承诺'。 “Promise”类型上不存在属性“map”

我知道 map 方法不能用于 Promise 对象。由于异步调用，初始数据类型设置为 Promise 类型，并在 fetch 解决时切换到 Todo[]。

如何解决这个问题动态使用map方法

【问题讨论】：

您需要await 调用fetcher 才能使您的待办事项列表脱离承诺。尝试在您的useEffect 中使用this answer 中建议的方法。
评论1是对的，应该标记为答案。使用 useState<Todo[]> 将修复此特定错误。
@CameronLittle 我忘了回复.. sry 和 thx 所有人
@bastianwegge 谢谢！！

标签： reactjs typescript async-await react-typescript

【解决方案1】：

你不应该将promise设置为state，而是设置promise解决后获得的结果。要等待 promise 解决，您可以使用 async-await 或 conventional .then 方法。同时从 useState 值中删除 Promise 作为类型

const Test: React.FC = () => {
  const [data, setData] = useState<Todo[]>([{
    userId: 1,
    id: 1234,
    title: "test",
    completed: false
  }]);

  useEffect(() => {
    fetcher("https://jsonplaceholder.typicode.com/todos").then((result) => {
        setData(result);
    });
  }, [])
  return (
    <div>
        {data && data.map((item: Todo)=> {
          <div>{item.id}<div>
        })}
  </div>
  );
}
export default Test;

【讨论】：