javascript - 我应该如何为以下对象正确使用 setState

Question

如果我的状态有以下对象。编写 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，字段传递“名称”。我想保持字段名称动态，以便我可以将其用于所有输入字段

方法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
  }
}

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

方法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 函数会产生奇怪的结果吗？

提前致谢

Answer 1

尝试

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

  this.setState({ edittedDataList });
}