Javascript 为什么只有在react js应用程序中发生两次提交事件后，this.setState才起作用？

下面是我的handleSubmit函数，它在提交满是问题的表单时启动。问题是，即使所有21个问题都得到了回答，filledAll也不会变为true。但当我第二次单击submit时，FilleAll设置为true

---

我正在使用filledAll，这样我就可以知道所有问题的答案，并在答案为真时重定向到另一个页面。

this.setState是一个异步函数。所以状态的更新最终只会发生。在您的情况下，this.setState下面的代码将在调用this.setState后立即运行。通过将您的代码移到this.setState下方，调用this.setState即可完成此工作

handleSubmit(event){
    event.preventDefault();
    let sum = 0;
    this.state.score.forEach(function(value, index){
        if (value !== undefined) {
            sum += Number(value);
        }
    });
    console.log(sum);

    if (this.state.score.length === 0) {
        this.setState({filledAll: false}, () => {
            console.log('Scroll to question 1')
            this.doScrolling("#question-1", 1000)
        });
    } else {
        for (let i = 1; i <= 21; i++) {
            console.log('Score of all 21 questions', this.state.score[i]);
            // wherever the score is undefined
            if (this.state.score[i] === undefined) {
                console.log('if score is undefined, set filledAll to false.')
                this.setState({filledAll: false}, () => {
                    console.log('Scroll to #question-' + i)
                    this.doScrolling("#question-" + i, 1000)
                });
                break;
            }
            else {
                this.setState({filledAll: true}, () => {
                    console.log('else block', this.state.filledAll);
                    localStorage.setItem('total', sum)
                    // window.location.replace("/index");
                });
            }
        }
    }
}

---

我不会对filledAll使用state，因为它不应该重新渲染组件

我会建议像这样的东西-

把手排气管{ 违约事件； 设和=0； 让filledAll=true； this.state.score.forEachfunctionvalue，索引{ 如果值！==未定义{ 总和+=数值； } }; console.logsum； 如果this.state.score.length==0{ console.log“滚动到问题1” 这是DoscorlingQuestion-11000 }否则{

---

对于let i=1；i是this.state.score 0索引数组？setState是异步和批处理的，因此您可能希望使用其回调模式@Jeremy，我已将其定义为score:[]在开始时，我从索引1中使用它。您是否使用formik或任何库来呈现表单？我不会对Filled All使用状态，因为此状态不会反映在组件渲染上，只需将其用作函数中的局部变量，如果结果为真，则在if块中使重定向Add Filled All=false；如果为真，则在if块中使用。state.score.length==0，它可以完美地工作。您也可以完全不使用filledAll，如果您发现一个未填充的分数，您可以从函数return；中跳出。在我看来，它将更具可读性。

handleSubmit(event){
    event.preventDefault();
    let sum = 0;
    this.state.score.forEach(function(value, index){
        if (value !== undefined) {
            sum += Number(value);
        }
    });
    console.log(sum);

    if (this.state.score.length === 0) {
        this.setState({filledAll: false}, () => {
            console.log('Scroll to question 1')
            this.doScrolling("#question-1", 1000)
        });
    } else {
        for (let i = 1; i <= 21; i++) {
            console.log('Score of all 21 questions', this.state.score[i]);
            // wherever the score is undefined
            if (this.state.score[i] === undefined) {
                console.log('if score is undefined, set filledAll to false.')
                this.setState({filledAll: false}, () => {
                    console.log('Scroll to #question-' + i)
                    this.doScrolling("#question-" + i, 1000)
                });
                break;
            }
            else {
                this.setState({filledAll: true}, () => {
                    console.log('else block', this.state.filledAll);
                    localStorage.setItem('total', sum)
                    // window.location.replace("/index");
                });
            }
        }
    }
}