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

Posted 2023-02-22

【中文标题】使用 typescript 中 Promise 中的值设置 React.FC 状态

【英文标题】：Set the React.FC state with values from a Promise in typescript

【发布时间】：2020-11-14 10:53:27

【问题描述】：

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

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

衷心感谢，

塞缪尔

【参考方案1】：

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

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

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

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

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

或者更简洁：

LandApi.getLands().then(setState)

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

【讨论】：

非常感谢。现在这对我来说很有意义。

很高兴它有帮助，欢迎来到 Stack Overflow！如果某个答案回答了您的问题，请不要忘记通过单击复选标记来接受答案，并在您获得足够的支持声望后通过单击向上箭头来支持任何有用的答案。