我应该如何为以下对象正确使用 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，字段传递 "name"。我想保持字段名称动态，以便我可以将其用于所有输入字段

方法一

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

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

方法二

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 });
}

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

How should I correctly use setState for the following object

javascript

setstate

reactjs