使用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[]数组"放入"功能组件状态，以便稍后进行映射？

你可能知道，我对网络编程很陌生。

衷心感谢

Samuel

Answer 1

假设JSON API返回一个数组，那么您几乎得到了它！

首先，在状态中添加一个类型，因为typescript不知道声明为[]的空数组中有什么。

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

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

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

或者更简洁地说：

LandApi.getLands().then(setState)

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