按钮点击不更新this.set状态在第一次点击；更新在第二次点击[重复]

Question

我正在尝试在React中构建我的第一个计算器。我的纽扣似乎有问题（我想）。在测试console.logs时，我发现我第一次点击添加按钮不会更新所有setState。相反，第二次单击会正确更新它。

知道它为什么不起作用吗？

js prettyprint-override">import React, { Component } from 'react';


class calculator extends Component {
    state = { 
        xxxxx:0,
        v1:0,
        v2:0,
        isCal:null

     }

    makeAdd = () => {

        const firstNum = this.state.xxxxx;

        this.setState({
            v1:firstNum,
            xxxxx:0,
            isCal:"add"
        });

        console.log("Add, firstNum is " + firstNum );
        console.log("and v1 is: " + this.state.v1);
        console.log("and isCal is: " + this.state.isCal);

        document.getElementById('DaInserting').innerHTML = null;

    };


    okInsert = (num) => {
        let ss = document.getElementById('DaInserting').innerHTML += num;

        this.setState({xxxxx:ss})
    }

    deAnswer = () => {


        let SecondNum = this.state.xxxxx;

        this.setState({v2:SecondNum})



        console.log("deSecond :" + this.state.v2);
        console.log("this.setState.isCal :" + this.state.isCal);


        let answer = 0;
        this.setState.v2 = this.state.xxxxx;
        if(this.state.isCal==="add") {
            answer = this.state.v1 + this.state.v2;
            console.log("and the answer is :" + answer);
        }

        document.getElementById('DaInserting').innerHTML = answer;

        //this.thenReset();
    }

    thenReset = () => {
        if (this.setState.isCal !== null) {
            this.setState({xxxxx:0})
            this.setState({v1:0})
            this.setState({v2:0})
            this.setState({isCal:null})
        }
    }



    render() {
        //console.log("\nALL states\nthis.state.xxxxx :" + this.state.xxxxx + "\nthis.state.v1 :"+ this.state.v1);

        return (
            <div className="container">
            <div className="row">
                <div style={{height:64}} className="col-12 card-body m-2 shadow-sm rounded bg-light" id="DaInserting"> </div>
            </div>    
            <div className="row">
                <div className="col-3"><div onClick={() => this.okInsert(7)} className="btn btn-secondary btn-lg m-2 btn-block ">7</div></div>
                <div className="col-3"><div onClick={() => this.okInsert(8)} className="btn btn-secondary btn-lg m-2 btn-block ">8</div></div>
                <div className="col-3"><div onClick={() => this.okInsert(9)} className="btn btn-secondary btn-lg m-2 btn-block ">9</div></div>
                <div className="col-3"><div onClick={this.makeDivide} className="btn btn-primary btn-lg m-2 btn-block ">/</div></div>
            </div>

            <div className="row">
                <div className="col-3"><div onClick={() => this.okInsert(4)} className="btn btn-secondary btn-lg m-2 btn-block ">4</div></div>
                <div className="col-3"><div onClick={() => this.okInsert(5)} className="btn btn-secondary btn-lg m-2 btn-block ">5</div></div>
                <div className="col-3"><div onClick={() => this.okInsert(6)} className="btn btn-secondary btn-lg m-2 btn-block ">6</div></div>
                <div className="col-3"><div onClick={this.makeMultiply} className="btn btn-primary btn-lg m-2 btn-block ">x</div></div>
            </div>

            <div className="row">
                <div className="col-3"><div onClick={() => this.okInsert(1)} className="btn btn-secondary btn-lg m-2 btn-block ">1</div></div>
                <div className="col-3"><div onClick={() => this.okInsert(2)} className="btn btn-secondary btn-lg m-2 btn-block ">2</div></div>
                <div className="col-3"><div onClick={() => this.okInsert(3)} className="btn btn-secondary btn-lg m-2 btn-block ">3</div></div>
                <div className="col-3"><div onClick={this.makeSubtract} className="btn btn-primary btn-lg m-2 btn-block ">-</div></div>
            </div>

            <div className="row">
                <div className="col-6"><div onClick={this.deAnswer} className="btn btn-warning btn-lg m-2 btn-block ">=</div></div>
                {/* <div className="col-3"><div onClick={() => this.okInsert(".")} className="btn btn-secondary btn-lg m-2 btn-block ">.</div></div> */}
                <div className="col-3"><div onClick={() => this.okInsert(0)} className="btn btn-secondary btn-lg m-2 btn-block ">0</div></div>
                <div className="col-3"><div onClick={this.makeAdd} className="btn btn-primary btn-lg m-2 btn-block ">+</div></div>
            </div>

            </div>

        );
    }
}

export default calculator;

我有一个名为“DaInserting”的div，当用户点击任何数字键时会更新，然后当用户点击加法/减法/等时，v1应该更新，但它没有。它在第二次点击时更新：-检查console.log。

当用户点击加法/减法后，DaInserting得到一个重置，用户再次点击一些数字，然后点击结果按钮，然后检查用户选择的内容（加法/减法）

Answer 1

它测试了你的代码，并且它正在正确地更新状态，请记住setState（）是一个异步函数，所以如果你想正确地检查添加函数作为状态更新后执行的回调，像这样：

this.setState({ v1:firstNum, xxxxx:0, isCal:"add"}, () => {
      console.log("Add, firstNum is " + firstNum );
      console.log("and v1 is: " + this.state.v1);
      console.log("and isCal is: " + this.state.isCal);
      console.log(news)
});

Answer 2

在React中，setState是异步的（有关详细信息，请参阅这些文档），因此您不能在调用setState后立即依赖状态更新。相反，您通常需要等到下一次呈现状态值进行更新。

为了解决这个问题，您可以将回调函数（作为第二个参数）传递给setState，或者使用wait，或者直接使用正在更新状态的新值。在这里，我建议使用最后一个选项。另外，通常只在退出函数之前调用setState是一个好主意，以避免异步混淆。

下面是一个如何更新deAnswer方法的示例：

deAnswer = () => {
    let answer = 0;
    if (this.state.isCal === "add") {
        answer = this.state.v1 + this.state.xxxxx;
        console.log("and the answer is :" + answer);
    }

    this.setState({
        v2: this.state.v1,
        answer: answer,
    })
}


render() {
    return (
        <div className="row">
            <div id="DaInserting">{ this.state.answer }</div>
        </div>
    )
}

另外请注意，我已经删除了innerHTML的设置，因为您可以而且应该通过使用状态变量进行呈现来更改“DaInserting”div的内容，而不是直接进行DOM操作。

也可以考虑看看Intro to React教程，这是一本很好的读物，可以帮助你学习和使用React构建。