Реагирует setState несколько массивов на основе индекса

Question

У меня довольно сложный вопрос, я работаю над страницей, которая принимает несколько входов из базы данных, и с этим я генерирую несколько входов (количество входов не является постоянным)

в основном так:

 const form = this.state.inputs.map((input, i) => {
      if (input) {
        return (
          <div key={i}>
            <div>
              <label htmlFor={input.inputLabel}>{input.inputName}</label>
            </div>
            <div className="form-input">
              <input
                name={`${input.inputName}-${i}`}
                type={input.inputType}
                id={input.inputLabel}
                onChange={this.onChange}
              />
            </div>
          </div>
        );
      }
    });

после генерации формы с неизвестным количеством значений (зависит от базы данных) я хочу сохранить все значения этой формы, но так как я не знаюколичество входов, которые я сделал, 2 массива (мне нужно сохранить значение и имя, которое будет позже показано на другой странице)

  state = {
  ....
    inputData: {
      names: [],
      values: []
    }
  ....
  };

, но у меня возникают проблемы с сохранением значений в setState

 onChange = e => {
    e.preventDefault();
    const { name, value } = e.target;
    var nameIndex = name.split('-');
    const names = [];
    const values = [];
    values[nameIndex[1]] = value;
    names[nameIndex[1]] = nameIndex[0];
    const inputData = { names, values };
    this.setState({ inputData });
  };

setState работает следующим образом: на моей карте я даю каждому входу имя, содержащее индекс, сгенерированный картой, поэтому имя похоже на «inputname-1», и я использую split длявыведите 1 и обновите два массива, которые я сделал в setState (значения, имена), и каждый раз, когда пользователь записывает на входе, он меняет значение внутри массива следующим образом: values ​​[1] = (пользовательский ввод ...),но я заметил, что если я изменю 2-е значение, например, значения перед ним в индексах 1 и 0 станут неопределенными, я что-то упустил?

Answer 1

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

. Вы можете сделать что-то вроде этого, если хотите обновить только определенные индексы без мутации:

const { name, value } = e.target;
const [key, index] = name.split('-');

this.setState(prevState => ({
   ...prevState,
   inputData: {
      values: Object.assign([], {...prevState.inputData.values }, { [index]: value }),
      names: Object.assign([], {...prevState.inputData.names }, { [index]: key })
   }
}))

Другой вариант - взятькопия prevState.inputData.values с использованием синтаксиса распространения и обновление его значения по определенному индексу, а затем установка его на inputData:

const { name, value } = e.target;
const [key, index] = name.split('-');

this.setState(prevState => {
  const cloneValues = [...prevState.inputData.values],
        cloneNames = [...prevState.inputData.names];

  cloneValues[index] = value;
  cloneNames[index] = key;

  return {
    ...prevState,
    inputData: {
      values: cloneValues,
      names: cloneNames
    }
  }
})