ReactJS - 在执行下一个代码之前等待多个 setState 完成

Question

我正在使用 ReactJS，但遇到了问题。从 axios 获取我的 response.data 后，我多次使用 setState 将所有必要的数据设置到我的状态中。但是，问题是我想等待所有 setStates 完成，然后再继续下一行代码。我不知道该怎么做，因为我知道 setState 接受第二个回调函数，但这仅适用于单个 setState。我尝试研究 Promise，但我不确定如何正确实施。

这是我的代码：

axiosInstance.get(`/customer-converted/?group=department&metric=${metric}&start=${start}&end=${end}`)
    .then(response => {
        this.setState({ data: response.data });
        let rangeStart = (response.data.length > 3) ? response.data[response.data.length - 3].date : response.data[0].date
        let rangeEnd = response.data[response.data.length - 1].date
        this.setState({ start: rangeStart })
        this.setState({ end: rangeEnd })
        // execute next line of code here only after all setState above are finished
    })

感谢所有帮助，谢谢！

Answer 1

你可以像这样同时设置多个东西：

this.setState({ start: rangeStart, end: rangeEnd })

你也可以在setState 中使用回调来做一些事情在状态被设置之后

this.setState({
    start: rangeStart, 
},() => {
    console.log('you can do something else here after you set state');
});

Answer 2

setState 方法接受第二个参数，这是一个回调，将在状态更新后执行。

axiosInstance.get(`/customer-converted/?group=department&metric=${metric}&start=${start}&end=${end}`)
    .then(response => {

        let rangeStart = (response.data.length > 3) ? response.data[response.data.length - 3].date : response.data[0].date
        let rangeEnd = response.data[response.data.length - 1].date
         // also you should combine state updates together
         this.setState({ data: response.data, start: rangeStart, end: rangeEnd  }, () => console.log('state was updated'));

        // execute next line of code here only after all setState above are finished
    })

Answer 3

试试这个可能对你有帮助

axiosInstance.get(`/customer-converted/?group=department&metric=${metric}&start=${start}&end=${end}`)
    .then(response => {
        this.setState({ data: response.data });
        let rangeStart = (response.data.length > 3) ? response.data[response.data.length - 3].date : response.data[0].date
        let rangeEnd = response.data[response.data.length - 1].date
        this.setState({ start: rangeStart })
        this.setState({ end: rangeEnd })
        return response
    }).then((response)=>{
// execute next line of code here 
});

Answer 4

出于此处所述的原因 - What is the advantage of using componentDidUpdate over the setState callback?

使用更现代的 React 版本并使用钩子，您可以使用 useEffect 对状态更新做出反应，从而实现更具“反应性”的编程样式。