一个输入的值正在影响另一个答案

【问题标题】：The value of one input is affecting another一个输入的值正在影响另一个
【发布时间】：2019-08-22 03:15:25
【问题描述】：

我有一个简单的应用程序，它允许某人将数字添加到输入中，并将这些数字呈现到可以编辑的页面上（作为输入）。

  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？

预期行为：

用户在输入框中输入数字并点击添加
该输入已呈现并可独立编辑

我如何做到这一点，或者我在这里做错了什么？

CodeSandbox

谢谢

【问题讨论】：

标签： javascript arrays reactjs input

【解决方案1】：

当你将this.state.currentObject添加到数组时，它作为一个引用起作用，因此数组中添加的对象和this.state.currentObject是同一个对象。您可以通过不添加对象本身，而是将对象的副本添加到数组中来防止这种情况：

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

【讨论】：

【解决方案2】：

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

您没有将实际数字添加到当前状态。我还从 add 中删除了值，如下所示：

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

您需要对状态进行错误处理，因为字符串加上数字会导致 NaN 错误。如您所见，数字在添加之前被解析。

【讨论】：

【解决方案3】：

感谢 dieckie 为我指明了正确的方向。不幸的是，该特定解决方案不起作用，但使用Object.assign 创建引用并将其推送到数组可以吗？

在这里发帖以便将来帮助他人/我自己：

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

This 的问题也很有帮助。

【讨论】：