时间戳

首页 > 解决方案 > 使用 typescript 中 Promise 中的值设置 React.FC 状态

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

问题描述

我是 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[] 数组“放入”功能组件状态，以便稍后映射它？

正如您可能知道的那样，我对网络编程很陌生。

以诚挚的谢意，

塞缪尔

标签： reactjstypescriptpromisereact-hooksstate

解决方案

假设 JSON API 返回一个数组，那么您几乎拥有它！

首先，为您的状态添加一个类型，因为 typescript 无法知道声明为[].

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

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

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

或者更简洁地说：

LandApi.getLands().then(setState)

这是有效的，因为它与之前的内联函数具有相同的签名。它需要一个参数，即新值。

推荐阅读