反应不同的状态属性

Question

我正在尝试实现一个表，其中用户可以通过单击行上的编辑按钮来编辑单个行，然后在进行更改后提交。我说两个组件App.js及其子Table.js来实现。

我最初想到的方法是让每个组件对行都有各自的状态，然后Table组件首先从父级发送给它的prop中读取内容，并且仅当用户提交更改时才更改父级行。反对onChange事件。但是我已经读到将道具读入状态是一种反模式。

因此决定通过在row中使用两个值（oldrows，newrows）来将所有内容都包含在父级中。并使用它们来维护状态，这是我想到的设计：

但是发生的事情是每当我单击取消将oldRows绑定到newRows时，这是我提出的codePen示例：

https://codepen.io/snedden-gonsalves/pen/zYOVMWz

handleChangeRowInput = (event, keyValue) => {
    let keyVals = [...this.state.newValuesArray];
    keyVals[this.state.editIndex][keyValue] = event.currentTarget.value;

    this.setState({
      newValuesArray: keyVals
    })
  }

    handleCancelRowInput = () => {
      this.setState({
        newValuesArray: [...this.state.oldValuesArray],
        editIndex: -1
      })
      console.log('array', this.state.newValuesArray)

  }

   handleSubmitRowInput = () => {
      this.setState({
        oldValuesArray: [...this.state.newValuesArray],
        editIndex: -1
      })
  }  

在codePen示例中，如果您输入一个新值，然后取消然后尝试再次添加一个新值，则旧值和新值将被绑定。

我尝试使用lodash deepClone，但没有成功，不确定为什么会这样。

另外，如果您可以评论在反应中设计该方法的最佳方法是什么，那真是太棒了，因为我刚开始反应并尝试学习..

Answer 1

在取消功能之后，我没有发现任何问题。对我来说，问题是在我调用保存功能后出现的。

单击“保存”按钮然后再次进行编辑后，旧值和新值将被绑定。

handleSubmitRowInput函数应使用cloneDeep函数为oldValuesArray创建一个新数组

   handleSubmitRowInput = () => {
      this.setState({
        oldValuesArray: _.cloneDeep(this.state.newValuesArray),
        editIndex: -1
      })
  }