我有一个处理房间及其统计数据的 React 应用程序。
之前,我将代码设置为作为 props 传递给下一个组件:
不过,我认为将所有房间的列表作为一个关联数组,其中每个元素的键与其包含的 ID 相同,这对我来说会更简单。为此,我在 for 循环中使用了与此类似的代码:
roomsList[rooms[v].ID] = rooms[v];
所以结果是:
[a001: {...}, a002: {...}, ...]
然后我继续传递这种类型的数组,而不是带有数字索引的标准数组,作为对下一个组件的支持:
<StatsBreakdown stats={computedStats.current} roomsList={roomsList} />
但是
现在,下一个组件将该 prop 视为一个空数组。
更奇怪的是,如果我用随机值 [0] 初始化 roomsList 数组,然后执行相同的过程,我最终会得到:
我不能用.map循环遍历数组,根据JS,长度实际上是0,它不仅是谷歌浏览器。
关于 JSX、JS 或 React 的工作方式,我是否遗漏了什么?
最佳答案
您的原始 roomsList 是一个对象数组,其索引为 0,1,2
等。roomsList[rooms[v].ID] = rooms [v];
表示您插入的元素不是使用数字而是字母数字字符串。因此,您得到的数组不再是一个数组,而是一个对象。
因此我们可以使用 Object.keys()
循环对象。
const renderRoomDets = Object.keys(roomsList).map(room => {
roomOwner = roomsList[room].owner_id;
return (
<div>
<p>{`Room Owner ${roomOwner}`}</p>
</div>
);
});
但我相信您的原始形式是理想的,因为您没有从这种表示法中获得任何特殊好处。
如果您想根据特定属性迭代数组,更好的选择可能是使用 .find()
或 .findIndex()
。
const matchedRoom = roomsList.find(room => room.ID === 'Srf4323')
关于javascript - 传递关联数组作为 Prop 不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55767553/