Увеличить длину массива состояний в зависимости от ввода пользователя - PullRequest
Новая
       34

Увеличить длину массива состояний в зависимости от ввода пользователя

0 голосов
/ 19 июня 2020

Я пытаюсь расширить массив state.array в зависимости от длины, введенной пользователем. Однако каждое нажатие кнопки расширяет массив только на 1 (иначе говоря, for l oop не выполняет итерацию полностью). Кто-нибудь знает, почему это так?

В этом случае x будет длиной пользовательского ввода, я присвоил ему постоянное значение для простоты. 

class DisplaySort extends Component {
  constructor(props) {
    super(props);
    this.state = {
      array: [],
     };
    this.generateArray = this.generateArray.bind(this);
  }

 render() {
    return (
      <div>
        <button onClick={this.generateArray}>Generate Array</button>
     </div>
    );
  }

  generateArray(e) {
    let x = 15;
    for (let i = 0; i < x; i++) {
      this.setState({ array: [...this.state.array, " "] });
    }

1 Ответ

0 голосов
/ 19 июня 2020

каждый раз, когда вы вызываете this.setState внутри l oop, предыдущий setState еще не заполнен, что вызывает асинхронное c поведение setState has (оно не действует немедленно, но сообщает компоненту, что должен снова запуститься с новым состоянием). Поэтому использование setState в al oop не является предсказуемым кодом и должно иметь что-то вроде 

generateArray(e) {
    let x = 15;
    this.setState({ array: [...this.state.array, ...Array(x).fill(' ')] });
    }

, где я вызываю setState только один раз

или все еще с l oop но только один setState

generateArray(e) {
    let x = 15;
    let array = [...this.state.array]
    for (let i = 0; i < x; i++) {
      array = [...array, ' ']
    }
    this.setState({ array });
   }
...