执行fetch后调用方法

Question

我正在进行一个返回字符串数组的获取请求。

fetch(linkFetch)
            .then(resp => resp.json())
            .then(arr => {
                that.setState({
                    images: arr
                });
            })
            .then(this.test());

在最后一行，您可以看到我尝试调用方法test()，该方法只是尝试访问fetch()请求中设置的状态。

test(){
    console.log(this.state.images[1]);
}

控制台日志'undefined'

但是，如果我将test()分配给一个按钮或其他东西，以便我可以手动调用它工作正常，这让我相信当我在获取请求中调用.then(this.test());时，它实际上被调用在国家设定之前。

如何在获取请求中设置状态后确保调用它？

Answer 1

您传递给then的参数必须是函数。

您正在立即调用this.test （即在异步函数解析之前）并传递其返回值（undefined，因为没有return语句）

您已经有一个示例，说明如何在代码的上一行中正确执行此操作

。

fetch(linkFetch)
    .then(resp => resp.json())
    .then(arr => {
        that.setState({
            images: arr
        });
    })
    .then(() => {
        this.test();
    });

Answer 2

React提供了一种在执行setState后调用函数的方法。您可以使用反应文档中描述的回调函数 https://reactjs.org/docs/react-component.html#setstate

您可以将所需的函数作为第二个参数传递给setState调用。

that.setState（{ key：Val}，that.test）;