我应该如何正确地将 setState 用于以下对象答案

【问题标题】：How should I correctly use setState for the following object我应该如何正确地将 setState 用于以下对象
【发布时间】：2019-11-28 00:24:23
【问题描述】：

如果我有以下对象处于状态。编写 setState 函数以将 formList[1].name 从“Name2”更新为“New Name”的正确方法是什么？这些字段中的每一个都链接到一个输入字段。

state = {
  formList = {
    0 : {
      id: 10,
      name: "Name1",
      date: "11/27/2019"
    },
    1 : {
      id: 11,
      name: "Name2",
      date: "11/27/2019"
    }
  }
}

我尝试了以下。对于我上面的示例，索引传递 1 并且字段传递“名称”。我想保持字段名称动态，以便我可以将其用于所有输入字段

方法一

updateForm = (e, index, field) => {
  const newValue = e.target.value;
  this.setState((prevState) => {
    return {
      edittedDataList: {
        ...prevState.edittedDataList,
        [prevState.edittedDataList[index][field]]: newValue
      }
    }
  })
}

但是，每当我开始在姓名输入字段中输入内容时，我的状态都会变为以下状态

结果 1

state = {
  formList = {
    0 : {
      id: 10,
      name: "Name1",
      date: "11/27/2019"
    },
    1 : {
      id: 11,
      name: "Name2",
      date: "11/27/2019"
    },
    Name2: "Name21" // where 1 is the character I pressed
  }
}

我还尝试使用以下设置状态。它实际上适用于设置状态，但我相信它可能会改变状态，所以我认为这不是 setState 的正确方法。它还有一个奇怪的副作用

方法 2

updateForm = (e, index, field) => {
  const newValue = e.target.value;
  this.setState((prevState) => {
    return prevState.edittedDataList[editAtIndex][field] = newValue;
  })
}

结果 2

state = {
  0: "N",
  1: "e",
  2: "w",
  3: " ",
  4: "N",
  5: "a",
  6: "m",
  7: "e",
  formList = {
    0 : {
      id: 10,
      name: "Name1",
      date: "11/27/2019"
    },
    1 : {
      id: 11,
      name: "New Name",
      date: "11/27/2019"
    }
  }
}

谁能告诉我编写 setState 的正确方法并解释为什么我当前的 setState 函数会产生奇怪的结果？

提前致谢

【问题讨论】：

标签： javascript reactjs setstate

【解决方案1】：

试试

updateForm = (e, index, field) => {
  const { edittedDataList } = this.state;
  edittedDataList[index][field] = e.target.value;

  this.setState({ edittedDataList });
}

【讨论】：

感谢它的工作原理并摆脱了添加到状态的奇怪对象。但我想像“edittedDataList[index][field] = e.target.value;”会改变状态吗？还是因为您将 edittedDataList 保存为单独的变量然后对该变量进行了更改，所以它不会改变它？
当然，如果你愿意，你可以使用 lodash const { edittedDataList } = clone(this.state);，但无论如何你都在使用 setState 改变下一行中的状态