Question

我正在使用ReactJS，遇到了一个问题。从axios取得response.data后，我多次使用setState来将所有必要的数据设置为我的状态。但是，问题是我要等待所有setState完成后再继续执行下一行代码。我不确定该怎么做，因为我知道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方法带有第二个参数，这是一个在状态更新后将执行的回调。

#include <stdio.h>
#include <stdbool.h>

int next_two_positions(int i, int x) {
    if((i == x - 1) || (i == x + 1) || (i == x - 2) || (i == x + 2)){
        return true;
    }
    return false;
}

int main(){
    int i, number, array[15];
    printf("Write all the elements of the array:\n");
    for(i=1; i<=15; i++){
        scanf("%d", &array[i]);
    }
    printf("Choose the number you want:\n");
    scanf("%d", &number);

    for(i=number; i<=15; i++){
        if(next_two_positions(i, number)){
            printf("%d ", array[i]);
        }
    }

    return 0;
}

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回调的范式-What is the advantage of using componentDidUpdate over the setState callback?

使用更新版本的React，并使用钩子，您可以使用useEffect来对状态更新做出反应，从而获得更加“活跃”的编程样式。

ReactJS-等待多个setState完成，然后再执行下一个代码

4 个答案: