传递关联数组作为道具不起作用

Question

我有一个React应用程序来处理房间及其统计数据。

以前，我将代码设置为作为道具传递给下一个组件：

• 原始统计数据（不是问题的关注点）

• 所有房间的阵列设置如下

  

我认为，对于我来说，将所有房间的列表作为关联数组会更简单，其中每个元素的键与它包含的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的工作方式，我有什么遗漏吗？

Answer 1

你原来的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')

Answer 2

使用其键而非索引迭代新数组。

或者甚至更好地将数据存储在实际对象而不是数组中，因为您正在使用字符串表示ID。

首先像这样定义你的对象：

let data = {};

然后开始向其添加记录。 我建议删除对象的ID属性，因为你将它存储在记录的密钥中，它是多余的，除非你删除条目，否则它不会去任何地方。

data[ID] = row;

要删除ID属性（可选）：

row.ID = null;
delete row.ID;

然后使用迭代它

for(let key in data){}