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 []数组，以便以后进行映射？

您可能会说，我对Web编程还很陌生。

衷心的感谢，

塞缪尔

Answer 1

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

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

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

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

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

或更简洁地说：

LandApi.getLands().then(setState)

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

使用打字稿中Promise中的值设置React.FC状态

1 个答案: