Question

我正在React中制作一个计算器应用程序。到目前为止，每个操作员都可以正常工作。但是，当我单击“ =”按钮并获得结果，然后单击另一个按钮时，该数字将无法正确添加。

我知道会有很多冗余代码，但是现在我正在解决一个问题，即得到结果后无法重置数字。

class App extends React.Component {

    state = {
        num1: [],
        num2: [],
        operator: null,
        result: null
    };

    currentNumber = (digit) => {

        if(this.state.operator===null) {

            let newNum1 = [...this.state.num1, digit];
            console.log("num1 FIRST", newNum1.join(''));
            this.setState({num1: newNum1.join('')})
            console.log("num1 AFTER", newNum1.join(''));
        }

        if(this.state.num1!==[] && this.state.operator!=null) {
            this.setState({num2: []})
            let newNum2 = [...this.state.num2, digit];
            console.log("num2 FIRST", newNum2.join(''));         
            this.setState({num2: newNum2.join('')})
            console.log("num2 AFTER", newNum2.join(''));
        }
    }

    getResult = () => {
        if(this.state.operator==="+") {
            this.setState({operator: "+"});
            let newNumber = parseInt(this.state.num1) + parseInt(this.state.num2);
            this.setState({result: newNumber})      
        } else if(this.state.operator==="-") {
            this.setState({operator: "-"});
            let newNumber = parseInt(this.state.num1) - parseInt(this.state.num2);
            this.setState({result: newNumber})      
        } else if(this.state.operator==="x") {
            this.setState({operator: "x"});
            let newNumber = parseInt(this.state.num1) * parseInt(this.state.num2);
            this.setState({result: newNumber})      
        } else if(this.state.operator==="÷") {
            this.setState({operator: "÷"});
            let newNumber = (parseInt(this.state.num1)) / (parseInt(this.state.num2));
            this.setState({result: newNumber.toFixed(2)})      
        }
        console.log("Current operator", this.state.operator);
    }

    clearDigit = () => {
        this.setState({num1: [], num2: [], operator: null, result: null});
    }

    displayOperator = (sign) => {
        this.setState({operator: sign});
    }

    render() {
        return (
            <div className="calculator_container">
                    <Screen 
                        num1 = {this.state.num1}
                        num2 = {this.state.num2}
                        operator = {this.state.operator}
                        displayNumber = {this.state.result}
                    />

                <Button 
                    onClick = {this.currentNumber}
                    getResult = {this.getResult}
                    clearButtonClick = {this.clearDigit}
                    showOperator = {this.displayOperator}
                />
            </div>
        );
    }
}

class Button extends React.Component {

    render() {
        return (
            <ul>
                <li><button data-number="1" onClick={event => this.props.onClick(event.target.getAttribute('data-number'))}>1</button></li>
                <li><button data-number="2" onClick={event => this.props.onClick(event.target.getAttribute('data-number'))}>2</button></li>
                <li><button data-number="3" onClick={event => this.props.onClick(event.target.getAttribute('data-number'))}>3</button></li>
                <li><button data-number="x" onClick={event => this.props.showOperator(event.target.getAttribute('data-number'))}>×</button></li>
                <li><button data-number="4" onClick={event => this.props.onClick(event.target.getAttribute('data-number'))}>4</button></li>
                <li><button data-number="5" onClick={event => this.props.onClick(event.target.getAttribute('data-number'))}>5</button></li>
                <li><button data-number="6" onClick={event => this.props.onClick(event.target.getAttribute('data-number'))}>6</button></li>
                <li><button data-number="÷" onClick={event => this.props.showOperator(event.target.getAttribute('data-number'))}>÷</button></li>
                <li><button data-number="7" onClick={event => this.props.onClick(event.target.getAttribute('data-number'))}>7</button></li>
                <li><button data-number="8" onClick={event => this.props.onClick(event.target.getAttribute('data-number'))}>8</button></li>
                <li><button data-number="9" onClick={event => this.props.onClick(event.target.getAttribute('data-number'))}>9</button></li>
                <li><button data-number="+" onClick={event => this.props.showOperator(event.target.getAttribute('data-number'))}>+</button></li>
                <li><button data-number="0" onClick={event => this.props.onClick(event.target.getAttribute('data-number'))}>0</button></li>
                <li><button data-number="AC" onClick={this.props.clearButtonClick}>AC</button></li>
                <li><button data-number="=" onClick={this.props.getResult}>=</button></li>
                <li><button data-number="-" onClick={event => this.props.showOperator(event.target.getAttribute('data-number'))}>-</button></li>
            </ul>
        );
    }
}

class Screen extends React.Component {

    displayAddedNumber = () => {
        this.props.displayNumber();
    }

    render() {
        return (
            <div className="display">
                {this.props.num1} {this.props.operator} {this.props.num2}<br />
            <span>{this.props.displayNumber}</span>
            </div>
        );
    }
}

Answer 1

我认为您有几种选择：

在结果后重置（在getResult()的末尾）：

this.setState({num1: [], num2: [], operator: null});

在结果后的第一个数字处重置（在displayOperator()和currentNumber()上方）：

if(this.state.result){
  this.clearDigit();
}

，然后切换到使用setState中的函数而不是对象，因为您使用的是旧状态。

还：

1：

/*...*/
if(this.state.operator==="+") {
  this.setState({operator: "+"}); // <-- you dont need this, you just aserted it's '+'
  let newNumber = parseInt(this.state.num1) + parseInt(this.state.num2);
  this.setState({result: newNumber})      
}
/*...*/

2：在函数执行过程中不要进行多个setState操作，这不仅是性能不佳的问题，而且您在此处遇到的代码也很脏您应该查看策略模式：）

3：您无法像那样进行比较-它无法工作，因为您正在比较对象引用

this.state.num1 !== []

您想要this.state.num1.length === 0或Array.isArray(this.state.num1)（或同时选择两者）

反应/无法重置当前状态

1 个答案: