这是我的状态:
state = {
list: {}
};
在某些功能中,我将状态更改为:
let id = 'ab12'
let array1 = [{a: 'hello', b: 'hi'}, {a: 'how', b: 'are'}]
this.setState({
list: {
...state.list,
[id]: array1
}
});
我不明白为什么我使用(我指的是别人的代码):
list: {
...state.list,
[id]: array1
}
但不是 :
list: {
[id]: array1
}
对于两者,当我尝试使用MDN Web工具时,我得到了相同的结果,这就是我尝试过的:
let state = {
list: {}
}
let id = 'ab12'
let array1 = [{a: 'hello', b: 'hi'}, {a: 'how', b: 'are'}]
state = {
list: {
...state.list,
[id]: array1
}
}
console.log(state.list)
还有这个:
let state = {
list: {}
}
let id = 'ab12'
let array1 = [{a: 'hello', b: 'hi'}, {a: 'how', b: 'are'}]
state = {
list: {
[id]: array1
}
}
console.log(state.list)
有什么不同?
简而言之:一种方法将连接旧的键值和新的键值,而另一种方法只是用新对象替换旧对象,而新对象只有一个键。
在您的情况下,这两种方式之间没有区别,因为list只包含一个键:
list: {
...state.list,
[id]: array1
}
list: {
[id]: array1
}
让我们假设列表是这样的:
list = {
name: 'abc',
address: 'abc',
}
现在你想在这里添加一个数组,通过以下方法,它将为现有对象添加一个新键,所有其他键将保持不变:
let id = 'ab12';
let array1 = [{a: 'hello', b: 'hi'}, {a: 'how', b: 'are'}];
list = {
...list,
[id]: array1
}
// list = {name: 'abc', address: 'abc', ab12: [...] }
但如果你写:
list = {
[id]: array1
}
输出将仅为:list = { ab12: [....] }
,名称和地址将被删除。
list: {
...state.list,
[id]: array1
}
帮助您保持列表的先前值只添加新闻。这就像以前的值与新值的串联一样。这就像使用Object.assign:如果一个键已经存在,他的值将被更新,否则键/值被添加到该对象。但是这个
list: {
[id]: array1
}
只需用新的值替换以前的值。