javascript - 传递关联数组作为 Prop 不起作用

Question

我有一个处理房间及其统计数据的 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 的工作方式，我是否遗漏了什么？

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')