反应 setState 不更新

Question

handleSkipThisQuestionClicked = () => {
    const { answersDict, currentIndex, currentQuestionGroupId } = this.state;
    if (currentIndex < answersDict[currentQuestionGroupId].length - 1) {
        this.setQuestionDetails(answersDict[currentQuestionGroupId][currentIndex + 1]);
    } else {
        // set current index to 0 and increase the current group
        debugger;
        this.setState((prevState) => ({
            currentQuestionGroupId: prevState.currentQuestionGroupId + 1,
            currentIndex: 0,
        }));
        this.setQuestionDetails(answersDict[this.state.currentQuestionGroupId][0]);
    }
};

在else块中的这段代码中，调用setState函数时，状态不会改变

注意：即使是异步的，时间长了也不会全部改变

这个问题会不会是因为 ES6 对状态的解构

编辑

我登录并检查了回调，状态仍然没有改变

handleSkipThisQuestionClicked = () => {
        const { answersDict, currentIndex, currentQuestionGroupId } = this.state;
        if (currentIndex < answersDict[currentQuestionGroupId].length - 1) {
            this.setQuestionDetails(answersDict[currentQuestionGroupId][currentIndex + 1]);
        } else {
            // set current index to 0 and increase the current group
            debugger;
            this.setState(
                (prevState) => ({
                    currentQuestionGroupId: prevState.currentQuestionGroupId + 1,
                    currentIndex: 0,
                }),
                () => {
                    console.log(this.state.currentQuestionGroupId);
                    console.log(this.state.currentIndex);
                },
            );
            this.setQuestionDetails(answersDict[this.state.currentQuestionGroupId][0]);
        }
    };

Answer 1

您始终可以在本地变量中复制状态，进行更改并重新设置状态。类似于：

handleSkipThisQuestionClicked = () => {
    const { answersDict, currentIndex, currentQuestionGroupId } = this.state;
    if (currentIndex < answersDict[currentQuestionGroupId].length - 1) {
        this.setQuestionDetails(answersDict[currentQuestionGroupId][currentIndex + 1]);
    } else {
        // set current index to 0 and increase the current group
        debugger;
        let result = Object.assign({}, this.state);
        result.currentQuestionGroupId++;
        result.currentIndex = 0;

        this.setState({ result });
        this.setQuestionDetails(answersDict[result.currentQuestionGroupId][0]);
    }
};

Answer 2

顺便说一句，因为 setQuestionDetails 依赖于状态是最新的，你应该使用 setState 的回调函数。

this.setState(prevState => ({
  currentQuestionGroupId: prevState.currentQuestionGroupId + 1,
  currentIndex: 0,
}), () => this.setQuestionDetails(answersDict[this.state.currentQuestionGroupId][0]);

反应 setState 不更新

React setState not updating

javascript

setstate