javascript - setState 不合并值

Question

我在 React 中使用以下代码来更新状态。 state 最终应该是这样的:

this.state.output = {
 'abc':{
     value: 10
 },
 'cde':{
     value: 20
  }
  // new values are added and old kept (if not overwritten)
}

我的处理程序:

 handleChange = (data) => {
    this.setState(prevState => {
      return {
        output: {
          [data.id]: { ...data },
        },
      }
    })
  }

当数据以新的data.id传入handleChage时，output并没有添加新的key，而是完全替换了它的所有内容

this.state.output = {
  'new':{
     value: 2
   },
}

我还需要保留之前的 key 。我的代码有什么问题？

Answer 1

因为您忘记添加其他属性及其值，所以像这样更新对象:

handleChange = (data) => {
    this.setState(prevState => {
        return {
            output: {
                ...prevState.output,      // notice this
                [data.id]: { ...data },
            },
        }
    })
}

或者简单地说:

handleChange = (data) => {
    this.setState(prevState => ({
        output: {
            ...prevState.output,
            [data.id]: { ...data },
        },
    })
)}