如何修复 TypeScript 函数类型错误？答案

【问题标题】：How to fix TypeScript function type error?如何修复 TypeScript 函数类型错误？
【发布时间】：2021-01-14 02:25:02
【问题描述】：

我有 TypeScript 代码：

const ItemsList: React.FC<any> = async () => {
  const data = await Http.get(url);
  return (
      <ul>
        {data.map(item => {
          return (
            <ItemPreview key={item.id} item={item} />
          );
        })}
      </ul>
  )
}

export default ItemsList

然后出现错误：类型 '()=>Promise' 不能用于类型 'FC'。 “Promise”类型缺少“ReactElement”类型的以下属性：类型、道具、键

不知道如何解决它。它应该是什么类型而不是 'React.FC'？

【问题讨论】：

不，你不能有async react 功能组件。将函数标记为async 使其始终返回Promise
您不会通过修复类型使其可用。谷歌“在反应组件中获取数据”。
Http.get(url) 回报承诺。那么，如果我不能使用异步，我该如何获取数据？ :( 知道如何解决吗？

标签： javascript reactjs typescript

【解决方案1】：

您实际上是以错误的方式思考它。与其尝试让 React 组件为您的数据渲染 wait，不如从更新 React 状态的角度来考虑它。您的组件应该只呈现当前状态：

return (
  <ul>
    {data.map(item => {
      return (
        <ItemPreview key={item.id} item={item} />
      );
    })}
  </ul>
)

现在，data 是什么？显然它是一个数组，并且您还有一个异步操作来获取该数组的值。所以目前有几个潜在的状态：

初始空数组
带有数据的更新数组

您将使用 React 状态来跟踪它。例如：

const [data, setData] = useState([]);

Http.get(url).then(result => {
  setData(result);
});

这首先将data 设置为一个空数组，然后在来自异步操作的响应中将其更新为新数据。由于它使用setState，这将指示 React 更新组件的渲染，因为状态已更改。

所以在这种情况下，用户界面首先不会显示任何结果，然后会立即显示数据。您可以通过跟踪某种“正在加载”状态并向用户显示“正在加载微调器”或某些指示正在获取数据来增加复杂性。

【讨论】：