为什么这个类型错误：无法读取浏览器上抛出的未定义(读取"地图")的属性？

Question

我没有，我刚刚删除了一个文件，突然出现了这个无法解决的错误。请检查我的代码。我试着添加一个编辑表格来编辑我的预订，但那是另一回事。当我删除了那个表格和所有相关的东西时，这个奇怪的错误就出现了Reserve.js

import { useState,useEffect } from "react";
import ReservationCard from "./ReservationCard";
function MyReservations({user,reservations,setReservations}){

useEffect(()=>{
fetch("/reservations")
.then(res=>res.json())
.then(reservationData=>{
setReservations(reservationData)
})
},[])

return(
<>

{reservations.map((reservation)=>(
<ReservationCard key={reservation.id} reservation={reservation}  />

))
}
</>
)
}
export default MyReservations;

App.js

import './App.css';
import { useEffect,useState } from 'react';
import About from './components/About'
import Navbar from './components/Navbar';
import Restaurants from './components/Restaurants';
import Loggin from './components/Loggin';
import RestaurantInfo from './components/RestaurantInfo';
import MyReservations from './components/MyReservations';
import { Route,Routes } from 'react-router-dom';
import Blogs from './components/Blogs';
function App() {
const [user, setUser] = useState(null);



useEffect(() => {
document.title = "Nyc";
}, []);



useEffect(() => {
// auto-login
fetch("/me", { credentials: "same-origin" }).then((r) => {
if (r.ok) {
r.json().then((user) => setUser(user));
}
});
}, [setUser]);

if (!user) return <Loggin error={'please login'} onLogin={setUser} />;
return (
<div className="App">
<Navbar user={user} setUser={setUser} />
<Routes>
<Route exact path="/blogs" element={<Blogs />} />

<Route exact path="/myreservations" element={<MyReservations user={user}  />} />
<Route exact path="/restaurants/:id" element= {<RestaurantInfo user={user} />}  />
<Route exact path="/restaurants" element={<Restaurants />} />
<Route exact path="/about" element={<About user={user} />} />
</Routes>

</div>
);
}
export default App;

Answer 1

reservations在MyReservations组件中未定义。将定义的reservations和setReservations道具传递给MyReservations，或者在MyReservations中声明reservations状态。我建议后者。

示例：

function MyReservations({ user }){
const [reservations, setReservations] = React.useState([]);

useEffect(() => {
fetch("/reservations")
.then(res => res.json())
.then(reservationData => {
setReservations(reservationData)
});
}, []);

return (
<>
{reservations.map((reservation) => (
<ReservationCard
key={reservation.id}
reservation={reservation}
/>
))}
</>
);
}