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？

预期行为：

用户在输入中输入数字，然后点击添加
该输入已呈现并且可以独立编辑

如何实现此目标？我在做什么错了？

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

    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错误。如您所见，数字是在加法之前解析的。

Answer 3

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

张贴在这里，以便将来对其他人/我自己有帮助：

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

This这个问题也很有帮助。

一个输入的值影响另一个

3 个答案: