Javascript setstate-动态键值-覆盖不合并状态

我有一个嵌套的状态对象，我试图动态更新，但当我更新时，最终值被覆盖而不是更新

我当前的代码如下所示：

inputChangeHandler = (event, key) => {
  const value = event.target.value
  this.setState({
    formData: {
          [`${key}`]: {
            [event.target.id]: value
          }
    }
  })
}

更新状态时，状态将从以下位置更新（例如）：

致：

而不是：

formData:{ 
    key1 {
        id: value1
        id2: value2
    }
}

---

有什么想法吗？

试试这个。您需要使用prevState，然后将该prevState与新状态合并

inputChangeHandler = (event, key) => {
    const value = event.target.value

    this.setState((prevState) => ({
      formData: {
        ...prevState.formData,
        [`${key}`]: {
          ...prevState.formData[`${key}`], // include prevState's nested key vals
          [event.target.id]: value
          }
      }})
    )
  }

---

试试这个。您需要使用prevState，然后将该prevState与新状态合并

inputChangeHandler = (event, key) => {
    const value = event.target.value

    this.setState((prevState) => ({
      formData: {
        ...prevState.formData,
        [`${key}`]: {
          ...prevState.formData[`${key}`], // include prevState's nested key vals
          [event.target.id]: value
          }
      }})
    )
  }

覆盖不合并状态

它修改相同的

formData

键

因此，应该使用以前的

formData

状态来正确构造新的

formData

状态

inputChangeHandler = (event, key) => {
  const value = event.target.value
  const id = event.target.id

  setState((prevState) => ({
    formData: {
      ...prevState.formData,
      [key]: {
        ...prevState.formData[key]
        [id]: value, // append id value under key
      }
    }
  }))
}

覆盖不合并状态

它修改相同的

formData

键

因此，应该使用以前的

formData

状态来正确构造新的

formData

状态

inputChangeHandler = (event, key) => {
  const value = event.target.value
  const id = event.target.id

  setState((prevState) => ({
    formData: {
      ...prevState.formData,
      [key]: {
        ...prevState.formData[key]
        [id]: value, // append id value under key
      }
    }
  }))
}

---

这不会合并

formData

中的现有键。这将只包含一个键。这不会合并

formData

中的现有键。这只包含一把钥匙。太好了！很好。很高兴能帮助@ScottWaddell！完美的很好。很高兴能帮助@ScottWaddell！