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

Question

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

我当前的代码如下所示:

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

当状态更新时，状态更新自(例如):

formData:{ 
    key1: {
        id: value1
    }
}

至:

formData:{ 
    key1 {
        id2: value2
    }
}

而不是:

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

有什么想法吗？

Answer 1

overwriting not merging state

State merging is shallow. .

它修改相同的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
      }
    }
  }))
}