提问人：Francesco 提问时间：4/20/2019 更新时间：4/20/2019 访问量：788
将关联数组作为道具传递不起作用
Passing associative array as props not working
问：
我有一个 React 应用程序来处理房间及其统计数据。
以前，我将代码设置为作为 props 传递给下一个组件：
- 原始统计数据（不是问题的问题）
所有房间的阵列设置如下
不过，我认为将所有房间的列表作为关联数组会更简单，其中每个元素的键与其包含的 ID 相同。为此，我在 for 循环中使用了类似于以下代码的代码：
roomsList[rooms[v].ID] = rooms[v];
因此，结果将是：
[a001: {...}, a002: {...}, ...]
然后，我继续将这种样式的数组（而不是带有数字索引的标准数组）作为道具传递给下一个组件，如下所示：
<StatsBreakdown stats={computedStats.current} roomsList={roomsList} />
但
现在，下一个组件将该 prop 视为空数组。
更奇怪的是，如果我用随机值 [0] 初始化该 roomsList 数组，然后执行相同的过程，我最终会得到：
我不能使用 .map 循环浏览数组，而且根据 JS，长度实际上是 0，它不仅仅是 Google Chrome。
关于JSX，JS或React的工作方式，我是否缺少什么？
答：
2赞
Jibin Joseph
4/20/2019
#1
您原来的 roomsList 是一个对象数组，其索引是 etc。 意味着您插入的元素不是使用数字而是字母数字字符串。因此，生成的数组不再是数组，而是对象。0,1,2roomsList[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')
1赞
Razvan Tanase
4/20/2019
#2
使用新数组的键而不是索引来迭代新数组。
或者最好将数据存储在实际对象中，而不是数组中，因为您使用的是 ID 字符串。
首先像这样定义你的对象：
let data = {};
然后开始向其添加记录。我建议删除对象的 ID 属性，因为您将它存储在记录的键中，它是多余的，除非您删除该条目，否则它不会去任何地方。
data[ID] = row;
要删除 ID 属性（可选），请执行以下操作：
row.ID = null;
delete row.ID;
然后使用
for(let key in data){}
评论