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

尝试一下。您需要使用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
          }
      }})
    )
  }

Answer 2

覆盖未合并状态

State merging is shallow.。

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

<label for="id_form-0-title">Title:</label> 

<label for="id_article-0-title">Title:</label>

setstate-动态键值-覆盖未合并状态

2 个答案: