Асинхронная конкатенация нажатых чисел в очищенной строке

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

Код выше в вашем вопросе: в первом 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 2

Вот один из способов сделать это. Как я уже сказал в моем комментарии, вы сбрасываете строку в каждом 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>

Answer 3

Вы можете сделать что-то вроде ниже, чтобы немедленно очистить состояние и объединить состояние с предыдущим значением состояния

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