傳遞關聯數組作為道具不起作用

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){}