TypeError：无法读取未定义 Nextjs 的属性“地图”？答案

【问题标题】：TypeError: Cannot read property 'map' of undefined Nextjs?TypeError：无法读取未定义 Nextjs 的属性“地图”？
【发布时间】：2021-09-13 01:03:05
【问题描述】：

无法读取未定义的属性“地图”我不知道如何解决我是新手，请帮助我获取此代码

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

【问题讨论】：

试试rooms?.map，因为rooms第一次渲染时不是数组，这是我的猜测..

标签： reactjs next.js

【解决方案1】：

让我们颠倒这个逻辑。

如果房间已定义且长度大于 0，则渲染房间。

否则，渲染“No Rooms”

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

【讨论】：

【解决方案2】：

先添加： {如果（！房间）返回}

【讨论】：

【解决方案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-block 中以避免此问题。

通过反转检查来修复它：

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

【讨论】：