我有一个反应组件,我试图将对象传播到构造函数中的状态。
constructor() {
super()
const shapesArray = [1, 2, 3]
let renderStates = shapesArray.map((el, i) => {
return {['shape'+i]: 'black'}
})
this.state = { ...renderStates }
console.log(this.state)
}
我想通过做this.state.shape0
来访问颜色,但是当我控制日志this.state
时,我得到了这个:
而不是Object {shape0: "black", shape1: "black", shape2: "black"}
。
我在这做错了什么?
那是因为您正在将一个数组传播到一个Object中。数组实际上是具有(通常)顺序整数字符串作为其键的对象。这些键是数组的索引。
如下所示,map
获取一个数组并生成另一个数组
const shapesArray = [1, 2, 3];
const renderStates = shapesArray.map((el, i) => {
return {
['shape' + i]: 'black'
}
});
console.log(renderStates);
传播到Object时,源Object中每个自己的可枚举属性的值将在其各自的键下添加到目标。由于数组的键是其索引,因此最终会得到一个Object,其中包含Array的每个元素的属性。每个属性的名称是其在数组中的索引。
要实现您的目标,您可以使用Array.prototype.reduce
从数组中构建一个对象,并在映射过程中创建名称。
const shapesArray = [1, 2, 3];
const renderStates = shapesArray
.map((el, i) => {
return {
['shape' + i]: 'black'
}
})
.reduce((o, element) => {
Object.keys(element).forEach(key => o[key] = element[key]);
return o;
}, {});
console.log(renderStates);
当然,通过在reduce内部传播对象,可以更优雅地编写本身。
const shapesArray = [1, 2, 3];
const renderStates = shapesArray
.map((el, i) => {
return {
['shape' + i]: 'black'
}
})
.reduce((o, element) => ({...o, ...element}), {});
console.log(renderStates);
作为对aluan-haddad's answer的优化,reduce可以处理map中的逻辑
const shapesArray = [1, 2, 3];
const renderStates = shapesArray
.reduce((acc, _, i) => ({
...acc,
['shape' + i]: 'black',
}), {});
console.log(renderStates);
renderStates
是一个数组,它具有从0开始的整数属性或数组索引,如果你想要特定的,那么{...renderStates}
将获取每个索引,并创建从该索引到该索引对应的值的映射,以实现你正在寻找的因为,你需要将你的renderStates
数组减少到这样的对象
let renderStates = shapesArray.map((el, i) => {
return {['shape'+i]: 'black'}
}).reduce((resultObj, currentShape,index) => resultObj['shape'+index] = currentShape['shape'+index]), { });
renderStates
现在是一个对象,你可以传播它,它会产生你想要的结果
无需在数组上迭代两次。使用reduce:
const shapesArray = [1, 2, 3];
const renderStates = shapesArray.reduce((accumulator, i) => {
accumulator['shape' + i] = 'black';
return accumulator;
}, {});
console.log(renderStates);