时间戳

首页 > 解决方案 > 按钮单击不会在第一次单击时更新 this.setState；第二次点击更新

javascript - 按钮单击不会在第一次单击时更新 this.setState；第二次点击更新

问题描述

我正在尝试在 React 中构建我的第一个计算器。我的按钮似乎有问题（我认为）。在使用 s 进行测试时console.log，我发现我第一次单击添加按钮不会更新所有 setStates。相反，第二次单击会正确更新它。

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

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”会重置，用户再次点击一些数字，然后点击结果按钮，该按钮应检查用户选择的内容（加法/减法）

标签： javascriptreactjs

解决方案

在 React 中，setState是异步的（有关更多信息，请参阅这些文档），因此您不能在调用setState. 相反，您通常需要等到下一次渲染才能更新状态值。

为了解决这个问题，您可以将回调函数（作为第二个参数）传递给setState，或使用await，或使用您直接更新状态的新值。在这里，我建议使用最后一个选项。此外，最好只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更改 div 的内容，而不是直接进行 DOM 操作。"DaInserting"

还可以考虑查看Intro to React Tutorial，这是一本不错的读物，将帮助您学习和构建 React。

推荐阅读