React组件嵌套显示问题：Rooms组件无法渲染及报错排查

核心排查方向与修复步骤 #

1. 确认Props传递有效性 #

• 在Hotel.js中检查向Rooms组件传递房间数据的代码，确保传递的是正确的数组：

  // Hotel.js 中渲染Rooms的代码片段
  <Rooms rooms={this.currentHotel.rooms} />
  

• 在Rooms.js中显式接收并校验props，避免未定义报错：

  // Rooms.js 组件定义
  const Rooms = ({ rooms = [] }) => {
    // 可添加日志确认数据是否接收成功
    console.log('Rooms data received:', rooms);
    // ...后续逻辑
  }
  

2. 修复容量筛选与渲染逻辑 #

• 确保筛选后的房间数据用于渲染，而非原始数据：

  // Rooms.js 中筛选与渲染逻辑
  const [selectedCapacity, setSelectedCapacity] = useState('');
  
  // 基于选中容量过滤房间
  const filteredRooms = selectedCapacity 
    ? rooms.filter(room => room.capacity >= Number(selectedCapacity))
    : rooms;
  
  // 用过滤后的数据渲染列表
  return (
    <div>
      <select 
        value={selectedCapacity}
        onChange={(e) => setSelectedCapacity(e.target.value)}
      >
        <option value="">所有房间</option>
        <option value="2">2人房</option>
        <option value="4">4人房</option>
      </select>
      <div className="rooms-list">
        {filteredRooms.map(room => (
          <div key={room.id} className="room-card">
            <h3>{room.name}</h3>
            <p>{room.description}</p>
            <p>容纳人数: {room.capacity}</p>
          </div>
        ))}
      </div>
    </div>
  )
  

3. 针对性修复控制台报错 #

• "Cannot read properties of undefined (reading 'map')"：给数组添加可选链或默认空数组，避免未定义时调用map：

  rooms?.map(room => /* 渲染项 */)
  // 或在组件参数中设置默认值：({ rooms = [] })
  

• "Missing key prop for list items"：给每个房间渲染项添加唯一key（优先用房间id，避免用索引）：

  filteredRooms.map(room => <div key={room.id}>{/* 内容 */}</div>)
  

• 异步数据加载问题：如果房间数据是异步获取的，添加加载状态提示：

  {rooms.length === 0 ? (
    <p>加载房间信息中...</p>
  ) : (
    filteredRooms.map(room => /* 渲染项 */)
  )}
  

4. 组件状态监听与调试 #

• 在Rooms.js中添加状态监听，确认数据更新是否触发组件重渲染：

  useEffect(() => {
    console.log('Rooms data updated:', rooms);
  }, [rooms]);
  

内容的提问来源于stack exchange，提问作者SCOCB