Question

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

我尝试直接使用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>

Answer 1

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

此答案中的解释确实很好。您可能会发现它很有帮助：

How to update nested state properties in React

Answer 2

如果仅用于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 })
    }
  }

在React状态下更新嵌套对象

2 个答案: