我收到一条警告消息，说“不要直接改变状态”。

Question

我的代码运行良好，但我不断收到此警告消息“不要直接改变状态。使用 setState()”。我尝试将 setState 用于 currentNumber 和输入，如下所示：

this.setState({currentNumber: this.state.currentNumber.toString() + numberbtn.toString()})
this.setState({inputs: this.state.currentNumber})

但它会在第二次单击而不是第一次单击时显示输出。 下面是对我有用但显示警告消息的完整代码。

import React from 'react'
import DisplayComponent from './components/DisplayComponent'

class App extends React.Component {
  constructor(props){
      super(props);
      this.state = {
        inputs: '',
        result: '',
        currentNumber: '',
      }
  }

  inputNumber = numberbtn => {
    this.state.currentNumber = this.state.currentNumber.toString() + numberbtn.toString()
    this.state.inputs = this.state.currentNumber 
    this.setState({result: this.state.inputs})
  }

  render() {
      return (
          <div className = "container">
              <div className = "display">
                  <DisplayComponent result={this.state.result}/>
              </div>
              <button onClick={() =>this.inputNumber(1)}>1</button>
              <button onClick={() =>this.inputNumber(2)}>2</button>
          </div>
      )
  }
}
export default App

Answer 1

这是因为您直接更新状态，例如this.state.currentNumber = ...。
我建议使用一些变量。

inputNumber = numberbtn => {
    let currentNumber = this.state.currentNumber.toString() + numberbtn.toString()
    let inputs = currentNumber 
    this.setState({currentNumber: currentNumber, inputs: currentNumber, result: inputs})
  }