Question

我需要将新对象推入状态变量而不删除先前的值。我的状态是

this.state = {
files:{
    file1: 
    {
        user1:[{
                key1: val1,
                key2: val2,
                key3: val3
            },
            {
                key1: val1,
                key2: val2,
                key3: val3
            }
        ]
    }
}   
}

我需要将files更新为

files:{
    file1: 
    {
        user1:[{
                key1: val1,
                key2: val2,
                key3: val3
            },
            {
                key1: val1,
                key2: val2,
                key3: val3
            }
        ]
    },
    file2: 
    {
        user2:[{
                key1: val1,
                key2: val2,
                key3: val3
            },
            {
                key1: val1,
                key2: val2,
                key3: val3
            }
        ]
    }
}

我需要将新对象file2推入具有与file1相同结构的值的状态。如何使用这两个对象更新状态？

Answer 1

您应该使用setState函数表达式，以便可以访问以前的状态：

addFile(newFile) {
  this.setState(state => ({
    files: {...state.files, ...newFile}
  })
}

newFile应该是一个如下所示的对象：

{
  file2: {
    ...
  }
}

此对象合并到先前的状态。如果已经存在具有相同键（file2）的条目，则它将被覆盖。

Answer 2

您可以使用spread运算符来实现此目的。它可以添加如下：

this.setState({
    file1: [...this.state.file1,{key1:'val1',key2:'val2',key3:'val3'}]
})

如何在不删除React中的先前值的情况下将新对象推入状态

2 个答案: