Массив не обновляется с помощью обработчика onChange в reactjs

Question

Я пытаюсь добавить каждое значение, введенное в отдельный элемент ввода, который добавляется при нажатии кнопки «Добавить» на GUI, в массив.

Не существует начального массива, поэтому, пожалуйста, не предлагайте ставить индекс из любого отображения исходного массива.

Несколько элементов ввода добавляются, когда пользователь нажимает кнопку добавления на GUI, метод subDivs () ниже объясняет это.

Поэтому я передаю значение счетчика в качестве индекса в обработчике onChange, но этот код не работает. Действительно ищу некоторые продуктивные материалы, может быть, я упускаю какую-то важную часть.

  handleChange(event, index) {
    event.preventDefault();
    let { nameArray } = this.state;
    nameArray[index] = event.target.value;
    this.setState({nameArray}, () => console.log("Array ", nameArray))
  }

addRow() {
    this.setState({ count: this.state.count + 1 })
  };

  subDivs() {
    let count = this.state.count, uiItems = [];
    var { names } = this.state;
    let options2 = names.map(name2 => {
      return { value: name2.name, label: name2.name };
    })
    while (count--)
      uiItems.push(
        <div className="newName" key={this.nextUniqueId()}>
          <div className="input-group mb-3" >
            <input id={count+1} type="text" className="form-control" placeholder="Enter Name"
              onChange={(e) => this.handleChange(e, count+1)}
            />
          </div>
        </div>
      )
    return uiItems;
  }

Answer 1

Может быть полезным.

handleChange(event) {
    event.preventDefault();
    let { nameArray } = this.state;
    if (!Array.isArray(nameArray)) nameArray = [];
    nameArray.push(event.target.value);
    this.setState({nameArray}, () => {
      return {
        nameArray
      };
    });
  }