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

我还尝试使用以下方法设置状态。它实际上可以与设置状态一起使用，但是我相信它可能会使状态发生变化，因此我认为这不是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函数产生奇怪的结果吗？

谢谢

Answer 1

尝试

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

  this.setState({ edittedDataList });
}

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

1 个答案: