Многие значения добавляются в массив onChange (INPUT)

Question

Я разрабатываю приложение, основанное на React, с включенной формой. Сначала пользователь должен ввести количество человек, затем пользователь должен будет указать возраст каждого человека. Если пользователь наберет 4, он отобразит 4 ввода.

Я вызываю функцию onChange для setState для каждого age в массиве:

  <input onChange={e => {this.setState({
    idades: [... this.state.idades, e.target.value]
  })}}/>

Проблема в том, что если я введу age для любого человека, например: 21, он добавит в массив: ["2","21"] вместо добавления ["21"]. Если я сотру весь ввод и напишу 3, массив будет: ["2", "21", "2", "", "3"].

Answer 1

Установить состояние для объекта, где ключ - это индекс ввода, значение - это значение, которое вводит пользователь. Вот так:

{
 0: 21,
 1: 3
}

Затем обновите состояние:

const context = this;
[...Array(this.state.numberOfPersons)].map((e, index) => 
  <input 
    key={index} 
    onChange={ev => {
      context.setState(prevState => ({
        idades: {
          ...prevState.idades,
          [index] = ev.target.value
        }
      }))}
    }
  />)

Answer 2

Я думаю, вы должны сделать динамический c state для своего компонента, как показано ниже:

import React, { PureComponent } from 'react';

class YourCompo extends PureComponent {
  state = {
    inputArr: [],
  };

  handleNumberOfInputs = e =>
    this.setState({
      inputArr: Array(e.target.value)
        .fill()
        .map((_, index) => ({ key: index, value: '' })),
    });

  handleChangeOfNewInputs = index => e => {
    const { inputArr } = this.state;
    const newInputArr = inputArr.map(
      (item, i) =>
        index === i ? { key: item.key, value: e.target.value } : item
    );

    this.setState({
      inputArr: newInputArr,
    });
  };

  render() {
    const { inputArr } = this.state;

    return (
      <div>
        <input type="number" onChange={this.handleNumberOfInputs} />
        {inputArr.map(({ key, value }, index) => (
          <input
            key={key}
            value={value}
            type="number"
            onChange={this.handleChangeOfNewInputs(index)}
          />
        ))}
      </div>
    );
  }
}

export default YourCompo;

Это может быть написано Хуксом, но я думаю, что этот ответ может быть более читабельным для вас, возможно оно не удовлетворяет ваше желание, но у него есть потенциал.