浏览器抛出TypeError: Cannot read properties of undefined (reading 'map')的排查

问题根源 #

你的MyReservations组件调用reservations.map()时，reservations的值是undefined，导致报错。原因有两点：

• App.js渲染MyReservations时，只传递了user属性，未传入reservations和setReservations
• 组件初始化阶段，reservations未被赋值（即使fetch是异步的，父组件也没提供初始值），直接执行map操作触发错误

修复步骤 #

1. 在App.js中添加reservations状态

在App组件内初始化reservations状态及对应的更新函数：

function App() {
  const [user, setUser] = useState(null);
  // 新增reservations状态初始化
  const [reservations, setReservations] = useState([]);

  // ... 其余代码保持不变
}

2. 给MyReservations传递完整props

修改App.js中的路由配置，将reservations和setReservations作为props传入组件：

<Route exact path="/myreservations" element={<MyReservations user={user} reservations={reservations} setReservations={setReservations} />} />

可选：为MyReservations的props设置默认值

为了避免父组件未传值时再次出错，可在MyReservations组件中给reservations设置默认空数组：

function MyReservations({user, reservations = [], setReservations}){
  // ... 组件原有逻辑不变
}

完成以上修改后，初始状态下reservations是空数组，map操作不会报错，等fetch请求完成后会自动更新为实际预订数据。

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