Javascript 对不同的状态属性进行绑定

我试图在react中实现一个表，用户可以通过单击行上的edit按钮编辑单个行，然后在进行更改后提交。我说有两个组件App.js和它的子Table.js来实现这一点

我最初想到的方法是让每个组件都有自己的行状态，然后表组件从父组件最初发送给它的props中读取，并且仅在用户提交更改时更改父行，以反对onChange事件。但我已经读到，把道具读进国家是一种反模式

所以决定通过为行（oldrows，newrows）设置两个值来将所有内容都包含在父级中。使用它们来维护状态，这是我提出的设计：

但是，每当我单击“取消”时，就会发生旧行绑定到新行的情况，下面是我举的一个代码笔示例：

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

我尝试使用lodash deepClone，但没有成功，不知道为什么会发生这种情况

---

另外，如果你能评论一下在react中设计此功能的最佳方式，那将是非常棒的，因为我对react非常陌生，只是想学习一下。

在取消功能后，我没有发现任何问题。对我来说，这个问题是在我调用save函数之后出现的

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

handleSubmitRowInput

函数应使用

cloneDeep

函数为旧值数组创建一个新数组

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

---

是的，看起来我没有像我想象的那样使用cloneDeep，如果我们使用两次，取消也会有同样的问题，谢谢您的回复

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