小编Nor*_*rth的帖子

如何设置react typescript useState fetch type和使用map方法

目前我正在练习 react-ts 通过异步获取器获取 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> …
Run Code Online (Sandbox Code Playgroud)

async-await typescript reactjs react-typescript

1
推荐指数
1
解决办法
2256
查看次数