Question

我正在使用react js中的计算器。当我添加两个数字时，它给出了正确答案，但在我点击减号按钮后，它会将第一个值添加到结果中，并为我提供添加结果。我试图找出问题所在，但我不能。这是我的操作函数的代码

import React, { Component } from 'react';



export default class Calculator extends Component {
constructor(props)
{
    super(props)
    {
            this.state={
                value:'0',
                firstValue:0,
                operation:'',
                previousvalue:'',
                nextvalue:'',
                showingTemporaryResult:false
            }
    };
    this.handleclick=this.handleclick.bind(this);
    this.operation=this.operation.bind(this);
    this.cleardisplay=this.cleardisplay.bind(this);
    this.dot=this.dot.bind(this);
    this.changesign=this.changesign.bind(this);
    this.percent=this.percent.bind(this);


}
handleclick(digit)
{    
    if(this.state.showingTemporaryResult) {
        console.log("TRUE CALLED");
        this.setState({value:String(digit),showingTemporaryResult:false})
    }
    else {
        console.log("ELSE CALLED");
        this.setState({value:this.state.value==='0'?String(digit):this.state.value + digit});
    }


   // console.log('helo click fire',this.state.value);

}
cleardisplay()
{
     this.setState({value:'0',
     firstValue:0,
     operation:'',
     previousvalue:'',
     nextvalue:'',
     showingTemporaryResult:false});
}
dot()
{
    if(this.state.value.indexOf('.')===-1)
    {
        this.setState({value:this.state.value+'.'})
    }
}
changesign()

{
    console.log("Event Change Sign")
    if(this.state.value.charAt(0)==='-')
    {
        this.setState({value:this.state.value.substr(1)})
       // console.log(' sign not change');

    }
    else{
        this.setState({value:'-'+this.state.value})
        console.log('lets change sign');
    }

}
operation(operator)
{


    if(operator==='+'||operator==='-'||operator==='*'||operator==='/')
    {
        console.log('operator coming',operator);
       this.setState({operation:operator});
       console.log('operator coming',this.state.operation);
        if(this.state.operator === '+') {
            let secondValue = parseInt(this.state.value);
            let firstValue = parseInt(this.state.firstValue);
            console.log('chcking first value in plus ',firstValue);
            let sum = secondValue+firstValue;
            this.setState({firstValue:sum,value:sum,showingTemporaryResult:true,operation:operator});
            //console.log('somthing here ');
        }
        else if(this.state.operator==='-')
        {
            let secondValue = parseInt(this.state.value);
            let firstValue = parseInt(this.state.firstValue);
            console.log('chcking first value in minus ',firstValue);
            let sum = secondValue-firstValue;
            this.setState({firstValue:sum,value:sum,showingTemporaryResult:true});
        }

        else if (this.state.operation === '') {
            let firstValue = parseInt(this.state.value);
            this.setState({firstValue});
            this.setState({value:'',operation:operator});
            console.log('or here ');
        }

    }
    else if(operator==='=')
    {
        if(this.state.operation === '+') {
            let answer = parseInt(this.state.value) + parseInt(this.state.firstValue);
            this.setState({value:answer});

        }
        else if(this.state.operation==='-'){
            let answer = parseInt(this.state.value) - parseInt(this.state.firstValue);
            this.setState({value:answer});
        }

    }



}
percent()
{
    this.setState({value:this.state.value/100})
}

render() {
return (
  <div className="cal">

      <input type="num" name="res" value={this.state.value} disabled style={{height:'8vh',width:'47vh',backgroundColor:'black',color:'white',fontSize:'20px'}}/><br></br>
      <input type="button" name="ac" onClick={() => this.cleardisplay()} value="Ac" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>
      <input type="button" name="+/-" onClick={() => this.changesign()} value="+/-" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>
      <input type="button" name="%" onClick={() => this.percent()}value="%" style={{height:'5vh',width:'12vh',backgroundColor:'#ccced1',border:'1px solid black'}}/>
      <input type="button" name="/" onClick={() => this.operation('/')} value='/' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>

      <br></br>
      <input type="button" name="7" onClick={() => this.handleclick(7)} value="7" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="8" onClick={() => this.handleclick(8)} value="8" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="9" onClick={() => this.handleclick(9)} value="9" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="*" onClick={() => this.operation('*')} value='*' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>

      <br></br>
      <input type="button" name="4"  onClick={() => this.handleclick(4)} value="4" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="5" onClick={() => this.handleclick(5)} value="5" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="6" onClick={() => this.handleclick(6)}value="6" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="-" onClick={() => this.operation('-')} value='-' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>

      <br></br>
      <input type="button" name="1" onClick={() => this.handleclick(1)} value="1" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="2" onClick={() => this.handleclick(2)} value="2" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="3" onClick={() => this.handleclick(3)} value="3" style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="+" onClick={() => this.operation('+')} value='+' style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>

       <br></br>
      <input type="button" name="0" onClick={() => this.handleclick(0)} value="0" style={{height:'5vh',width:'24vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="." onClick={() => this.dot()} value="." style={{height:'5vh',width:'12vh',backgroundColor:'#d2d4d8',border:'1px solid black'}}/>
      <input type="button" name="=" onClick={() => this.operation('=')} value="=" style={{height:'5vh',width:'12vh',backgroundColor:'#ff9100',border:'1px solid black'}}/>



  </div>
    )
    }
     }

现在我在帖子中添加我的整个组件....................................... .................................................. .................................................. .................................................. ............................................

Answer 1

您正在设置状态，然后检查它的值。您需要了解setState是一个异步操作，您不能指望它在您调用后立即更改。

基于反应docs：

对setState的调用是异步的 - 不要依赖this.state在调用setState后立即反映新值。如果您需要基于当前状态的计算值，请传递更新程序功能而不是对象（详见下文）。

在您的代码中，您正在更改状态： this.setState({operation:operator});然后检查它的新值if(this.state.operation === '+') 您应该检查operator或在状态更改后使用componentDidUpdate或setState的callaback进行操作 this.setState({operation: operator}, () => {if(this.state.operation === '+')})

修改
编辑后，我发现了两个问题：

您的体系结构并不好，您看到有时您在设置它后会收到一个空操作符并且有一些不完整的if语句，您可以在将代码移动到回调后将其删除。

在设置状态时，您应该清除value，因为它不再相关。在这一行：
this.setState({firstValue:sum,value:sum,showingTemporaryResult:true,operation:operator});

Answer 2

我知道你有一些错误，因为setState不是同步的。如果要在状态设置为新值后执行某些操作，则需要将回调作为第二个参数传递。请看一下这段代码：

constructor() {
  this.state = {
    foo1: 'bar',
    foo2: 'bar'
  }
}

someMethod() {
  this.setState({foo1: 'baz});
  console.log(this.state.foo1); // outputs "bar"
}

someDifferentMethod() {
  this.setState({foo2: 'baz}, () => {console.log(this.state.foo2)});
  // outputs "baz"
}

在计算器中输出错误的反应js

2 个答案: