Question

我在反应中使用以下代码来更新状态。 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不会添加新密钥，而是完全替换其所有内容

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

我还需要保留上一个密钥。我的代码有什么问题？

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 },
        },
    })
)}

Answer 2

对象传播语法是最新规范。这是它的文档：using-object-spread-operator

下面的代码改为使用Object.assign方法：

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

setState未合并值

2 个答案: