使用 typescript 中 Promise 中的值设置 React.FC 状态

Question

我是 react 新手，我想将对象数组分配给 React.FC 状态。 我的 api 逻辑如下所示：

class LandApi {
    async getLands(): Promise<Land[]> {
        const response = await fetch('http://localhost:8080/api/lands', {
           method: 'GET',
           headers: { 'Content-Type': 'application/json' }
        });

        return response.json();
    }
}

我有这个功能组件：

 const MapLands: React.FC  = () =>
{
let [state, setState] = useState([])

useEffect(() => {
    LandApi.getLands().then((data) => {
        setState({
            landList: data  //the problem is here
        })
    })
})

return (
    <div>
        {
            //Map logic here
        }
    </div>
)
}

如何将 Land[] 数组“放入”功能组件状态，以便稍后映射它？

正如您所知，我对网络编程很陌生。

衷心感谢，

塞缪尔

Answer 1

假设 JSON API 正在返回一个数组，那么您就差不多完成了！

首先，为您的状态添加一个类型，因为 typescript 无法知道声明为 [] 的空数组中的内容。

let [state, setState] = useState<Land[]>([])

然后将结果直接传递给setState()，中间没有对象：

LandApi.getLands().then((data) => {
  setState(data)
})

或者更简洁：

LandApi.getLands().then(setState)

之所以有效，是因为它与之前的内联函数具有相同的签名。它接受一个参数，即新值。