通过关联数组作为道具不起作用

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 。

所以我们可以使用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字符串。

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

{
cat("\014") # clear the entire console
p1 <- readline("prompt1: ")
cat("\014") # clear again, then repeat previous text
p2 <- readline(paste0("promt1: ", p1, ". prompt2: "))
}

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

let data = {};

要删除ID属性（可选）：

data[ID] = row;

然后使用

进行遍历

row.ID = null;
delete row.ID;