在 React 状态下更新嵌套对象答案

【问题标题】：Updating Nested Object in React State在 React 状态下更新嵌套对象
【发布时间】：2020-07-07 09:36:35
【问题描述】：

我有一个包含嵌套对象的状态。我需要将状态值与onChange 事件一起setState() 与我在输入部分中写的每个单词一起使用。

我尝试使用this.state.rootProperty.childProperty 直接更新，但它会创建一个新状态rootProperty.childProperty: "value i wrote"。

关于如何setState 那些嵌套状态的任何想法？谢谢。

    this.state = {
      taskData: "",
      memberData: "",
      judul: "",
      kode: "",
      ketua_team: "",
      koordinator: "",
      tgl_mulai: "",
      tgl_selesai: "",
      detail1: {
        no: "",
        tiket: "",
        deskripsi: "",
        target: "",
        auditor: "",
        nil_peg: "",
        nil_at: "",
        nil_at_at: "",
      },

//this is my state, i need to update auditor value with handler

onChangeNest(e) {
    this.setState({ [e.target.name]: e.target.value });
  }

//and my input props
 <input
 type="text"
 placeholder="auditor"
 name="detail1.auditor"
 onChange={this.onChangeNest}
 ></input>

【问题讨论】：

请提供代码sn-p
另外，你从不直接设置状态。您必须始终使用setState
@Apostolos，是的，我使用 setState。
请检查我的答案。
@Apostolos 你的回答很有魅力，非常感谢。

标签： reactjs nested state

【解决方案1】：

如果仅适用于 1 级嵌套对象，您可以尝试以下方法：

  onChangeNest = (e) => {
    let targetName = e.target.name
    if (targetName.includes(".")) {
      let splt = targetName.split(".")
      let oldObj = {...this.state[splt[0]]}
      oldObj[splt[1]] = e.target.value
      this.setState({ [splt[0]]: oldObj })
    } else {
      this.setState({ [targetName]: e.target.value })
    }
  }

【讨论】：

【解决方案2】：

setState 不处理嵌套属性的更新。一种可能的解决方案是复制整个状态（创建一个虚拟对象），修改它并使用完全修改的对象更新状态。

这个答案很好地解释了。您可能会发现它很有帮助：

How to update nested state properties in React

【讨论】：