類型錯誤：無法讀取未定義 Nextjs 的屬性“map”？

Question

無法讀取未定義的屬性“地圖”我不知道如何解決我是新手反應請幫助我此代碼

  {rooms && rooms.length === 0 ? (
          <div className='alert alert-danger'>
            <b>No Rooms</b>
          </div>
        ) : (
          rooms.map((room) => <RoomItem key={room._id} room={room} />)
        )}

Answer 1

讓我們顛倒這個邏輯。

如果房間已定義且其長度大於 0，則渲染房間。

否則，渲染“無房間”

{
  rooms?.length > 0 ? (
    rooms.map((room) => <RoomItem key={room._id} room={room} />)
  ) : (
    <div className="alert alert-danger">
      <b>No Rooms</b>
    </div>
  );
}

Answer 2

先添加：{if(!rooms) return}

Answer 3

將代碼分解為其基礎知識，您將獲得：

if (rooms && rooms.length === 0)
  return "No Rooms";
else
  return rooms.map(room => room.id);

當rooms為undefined 、 &&短路時（即，如果第一個為假則跳過第二個操作數），代碼現在等價於：

if (undefined) ​return "No Rooms"
else return undefined.map(/*...*/)

這就是為什么您會收到“無法讀取未定義的屬性映射”錯誤的原因。 我懷疑您剛剛添加了rooms&&因為您最初“無法讀取未定義的屬性長度”。 您應該嘗試始終將“備份案例”放在 else 塊中以避免此問題。

通過反轉檢查來修復它：

rooms && rooms.length > 0 ? (
 // rooms.map ...
) : (
 // No Rooms ...
)