反应本性 - 获取结束后调用另一个函数

Question

我是React-Native

的新手

我有fetch，通过它可以获得一些数据。我想做的是在请求结束并准备好数据后调用其他功能或更新状态。这是我的代码。

getProducts()
    {
        return fetch(prodUrl, {method: "GET"})
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({brandList: responseData.products});
                console.log("Brands State -> : ",this.state.brandList)
            })
            .done();
    }

我在componentWillMount()中调用此getProducts()函数，并尝试在render()中使用被提取的数据。设置状态后，尝试使用console.log()时看不到更改，很可能是因为fetch()是异步。在fetch()结束之前，如何停止执行render()功能？或者您可以推荐任何其他请求类型，而不是同步的fetch()。

Answer 1

不是因为获取是异步的，那时您已经有了响应。这是因为SetState不会立即更改状态，因此您要在更改状态之前调用console.log。SetState具有可选回调，因为它是第二个参数，该参数将在已更新后将被调用，因此您可以像这样更改它以正确查看效果：

getProducts()
    {
        return fetch(prodUrl, {method: "GET"})
            .then((response) => response.json())
            .then((responseData) => {
                this.setState(
                  {brandList: responseData.products},
                  () => console.log("Brands State -> : ",this.state.brandList)
                );  
            });
    }

Answer 2

您不想"停止" render()函数被执行。但是，如果数据可用，则可以在渲染中进行检查，并在没有的情况下渲染旋转器或其他内容。

非常粗略的草图，说这是如何的：

render() {
  let component = this.state.brandList ? <ComponentWithData/> : <Spinner/>;
  return component;
}