Значение одного входа влияет на другой

Question

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

  addSiblingValue(evt) {
    this.setState({
      currentObject: {
        ...this.state.currentObject,
        numberOfSiblings: evt.target.value
      }
    });

  add() {
    const array = [...this.state.array, this.state.currentObject];
    this.setState({
      array
    });
  }

  siblingCountChange(rowIndex, event) {
    const array = [...this.state.array];
    array[rowIndex].numberOfSiblings = event.target.value;
    this.setState({ array });
  }

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

В первой строке входов используется собственный объект currentObject, который перемещается к this.state.array, поэтому я не уверен, почему редактирование чего-либо в этом массиве повлияет на currentObject?

Ожидаемое поведение:

1. Пользователь вводит число во вход и нажимает кнопку добавления
2. Этот вход отображается и может редактироваться независимо

Как мне этого добиться или что я здесь делаю не так?

CodeSandbox

Спасибо

Answer 1

Когда вы добавляете this.state.currentObject в массив, он работает как ссылка, так что добавленный объект в массиве и this.state.currentObject являются одним и тем же объектом.Вы можете предотвратить это, добавив не сам объект, а копию объекта в массив:

  add() {
    const array = [...this.state.array, {"numberOfSiblings": this.state.currentObject.numberOfSiblings}];
    this.setState({
      array
    });
  }

Answer 2

Спасибо Дики за то, что указал мне правильное направление.К сожалению, это конкретное решение не сработало, но с помощью Object.assign для создания ссылки и передачи его в массив было?

Публикация здесь, чтобы в будущем это помогло другим:

  add() {
    let copyOfCurrentObject = Object.assign({}, this.state.currentObject);
    const array = [...this.state.array, copyOfCurrentObject];
    this.setState({
      array
    })
  }

Этот вопрос также был полезен.

Answer 3

    siblingCountChange(rowIndex, event) {
    const array = [...this.state.array];
    array[rowIndex].numberOfSiblings += parseInt(event.target.value);
    this.setState({ array });
  }

Вы не добавляли фактическое число в текущее состояние.Я также удалил значение из надстройки, например, так:

<input
 type="text"
 onChange={this.siblingCountChange.bind(this, rowIndex)}
/>

Вам нужно будет обработать ошибку для состояния в виде строки, а число приведет к ошибке NaN.Как видите, перед сложением число анализируется.