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

Question

我正在使用 ReactJS，但遇到了问题。 在从 axios 获取我的 response.data 后，我多次使用 setState 将所有必要的数据设置到我的 state 中。 但是，问题是我想等待所有 setStates 完成，然后再继续下一行代码。 我不知道该怎么做，因为我知道 setState 接受第二个回调 function，但这仅适用于单个 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 })

您还可以在设置 state后使用setState中的回调来执行某些操作

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

Answer 2

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

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

出于此处概述的原因，我倾向于采用与其他人提到的依赖 setState 回调不同的范式 - 使用 componentDidUpdate 优于 setState 回调的优势是什么？

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