Question

无法读取未定义的属性 'map' 我不知道如何解决我是新手反应请帮我这个代码

  {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

将代码分解为基础，您就可以：

rooms

当 undefined 为 && 时，if (undefined) return "No Rooms" else return undefined.map(/*...*/) 短路（即，如果第一个操作数为 false，则跳过第二个操作数），代码现在等价于：

rooms&&

这就是您收到“无法读取未定义的属性映射”错误的原因。我怀疑您刚刚添加了 rooms && rooms.length > 1 ? ( // rooms.map ... ) : ( // No Rooms ... )，因为您最初“无法读取未定义的属性长度”。您应该尝试始终将“备份案例”放在 else 块中以避免此问题。

通过撤销检查来修复它：

{{1}}

类型错误：无法读取未定义 Nextjs 的属性“map”？

3 个答案: