Question

我的小型React实验的目标是“清除this.state.numString的初始值（输出一个空字符串），然后将单击的数字连接到this.state.numString中”。为了使其异步执行，我利用了this.setState的回调，其中发生了数字字符串的串联。

class App extends Component {
  state = {
    numString: '12'
  }

  displayAndConcatNumber = (e) => {
    const num = e.target.dataset.num;

    this.setState({
      numString: ''
    }, () => {
      this.setState({
        numString: this.state.numString.concat(num)
      })
    })
  }

  render() {
    const nums = Array(9).fill().map((item, index) => index + 1);
    const styles = {padding: '1rem 0', fontFamily: 'sans-serif', fontSize: '1.5rem'};

    return (
      <div>
        <div>
          {nums.map((num, i) => (
            <button key={i} data-num={num} onClick={this.displayAndConcatNumber}>{num}</button>
          ))}
        </div>
        <div style={styles}>{this.state.numString}</div>
      </div>
    );
  }
}

结果不是我期望的；只会将我单击的当前数字添加到空字符串中，然后将其更改为我单击下一步的数字，不会发生字符串数字的串联。

Answer 1

您可以执行以下操作立即清除状态并将状态与先前的状态值连接

this.setState({
    numString: ''
  }, () => {
    this.setState( prevState => ({
     numString: prevState.numString + num
    }));
  });

Answer 2

上面问题中的代码，在第一个setState中，将变量设置为空，在第二个setState中，将新值与空字符串状态连接起来。那就是为什么它不起作用。

尝试如下操作：

   class App extends Component {
  state = {
  numString: '12',
  isFirstTime: true
  }

 displayAndConcatNumber = (e) =>  {
    const num =   e.target.dataset.num;
    if(this.state.isFirstTime){

      this.setState({
      numString: '',
      isFirstTime: false
    }, () => {
    this.setState({
    numString:     this.state.numString.concat(num)
     })
    })
    }else{
     this.setState({
     numString:    this.state.numString.concat(num)
  })
   }

 }

   render() {
    const nums =  Array(9).fill().map((item, index) => index + 1);
    const styles = {padding: '1rem 0', fontFamily: 'sans-serif', fontSize: '1.5rem'};

   return (
  <div>
    <div>
      {nums.map((num, i) => (
        <button key={i} data-  num={num} onClick={this.displayAndConcatNumber}>{num}</button>
      ))}
    </div>
    <div style={styles}>{this.state.numString}</div>
  </div>
);
  }
 }

Answer 3

这是执行此操作的一种方法。正如我在评论中所说，您正在每个setState中重置字符串。因此，您需要某种条件才能做到这一点。

class App extends React.Component {
  state = {
    numString: '12',
    resetted: false,
  }

  displayAndConcatNumber = (e) => {
    const num = e.target.dataset.num;

    if ( !this.state.resetted ) {
      this.setState({
        numString: '',
        resetted: true,
      }, () => {
        this.setState( prevState => ({
         numString: prevState.numString.concat(num)
        }))
      })
    } else {
      this.setState(prevState => ({
        numString: prevState.numString.concat(num)
      }))
    }
  }

  render() {
    const nums = Array(9).fill().map((item, index) => index + 1);
    const styles = { padding: '1rem 0', fontFamily: 'sans-serif', fontSize: '1.5rem' };

    return (
      <div>
        <div>
          {nums.map((num, i) => (
            <button key={i} data-num={num} onClick={this.displayAndConcatNumber}>{num}</button>
          ))}
        </div>
        <div style={styles}>{this.state.numString}</div>
      </div>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

在已清除的字符串中异步串联单击的数字

3 个答案: