由于值“未定义”,转换为 ObjectId 失败(类型字符串)位于路径“_id”处对于型号“卡”
我有一个带有卡片的网站,当您单击某些卡片时,您需要看到同一张卡片,但具有其他详细信息。但每次我点击某张卡时,我都会在终端中收到以下信息: 对于模型“card”的路径“_id”处的值“未定义”(类型字符串),转换为 ObjectId 失败,
这里我写的是:
** CardDatails.jsx**
import React, { Component } from "react";
import PageHeader from "../common/pageHeader";
import { getCard } from "../../services/cardService";
class CardDetails extends Component {
state = {
card: {
adress: "",
bizNumber: "",
createdAt: "",
description: "",
image: { url: "", alt: "" },
likes: [],
phone: "",
title: "",
},
errors: {},
isMounted: false,
};
async componentDidMount() {
try {
const { data } = await getCard(this.props.id);
this.setState({ card: { card: data, isMounted: true } });
} catch (error) {
this.setState({ errors: error.massage });
}
}
render() {
const { card } = this.state;
const {
title,
description,
image: { url, alt },
address,
phone,
bizNumber,
createdAt,
likes,
} = card;
return (
<React.Fragment>
<PageHeader
title={`Business Card of: ${title}`}
subTitle={`Businness Description: ${description}`}
/>
<div className="card-body p-2">
<div>
<img
style={{ maxWidth: "400px" }}
src={url}
className="card-img"
alt={alt}
></img>
<br />
<strong>Tel: </strong>
{phone}
</div>
<div>
<strong>Address: </strong>
{address}
</div>
<div>
<strong>Card Number: </strong>
{bizNumber}
</div>
<div>
<strong>Created At: </strong>
{createdAt}
</div>
<div>
<strong>likes: </strong>
{likes}
</div>
</div>
</React.Fragment>
);
}
}
export default CardDetails;
App.js:
import { useParams } from "react-router-dom";
import CardDetails from "./CardDetails";
const CardDetailsConvertor = () => {
const { id } = useParams();
return <CardDetails id={id} />;
};
export default CardDetailsConvertor;
import HomePage from "./layout/main/Home";
import About from "./layout/main/About.jsx";
import { Routes, Route } from "react-router-dom";
import Error404 from "./layout/main/Error404";
import Header from "./layout/header/Header.jsx";
import Footer from "./layout/footer/footer.jsx";
import BizSignup from "./layout/main/BizSignup";
import Logout from "./layout/main/Logout";
import MyCards from "./layout/main/MyCards";
import MyFavoriteCards from "./layout/main/MyFavoriteCards";
import Login from "./layout/main/Login";
import Signup from "./layout/main/Signup";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { getCurrentUser } from "./services/userService";
import CreateCard from "./layout/main/CreateCard";
import EditCardConvertor from "./layout/main/editCardConvertor";
import CardDetails from "./layout/main/CardDetails";
import CardDetailsConvertor from "./layout/main/CardDetailsConvertor";
function App() {
const user = getCurrentUser();
return (
<div className="App">
<Header user={user} />
<ToastContainer />
<main style={{ minHeight: "85vh" }}>
<Routes>
<Route path="/about" element={<About />} />
<Route path="/biz-signup" element={<BizSignup />} />
<Route path="/logout" element={<Logout />} />
<Route path="/my-cards" element={<MyCards user={user} />} />
<Route path="/create-card" element={<CreateCard user={user} />} />
<Route
path="/card-details-converotr"
element={<CardDetailsConvertor user={user} />}
/>
<Route
path="/edit-card/:id"
element={<EditCardConvertor user={user} />}
/>
<Route path="/card-details/:id" element={<CardDetails />} />
<Route
path="/my-fav-cards"
element={<MyFavoriteCards user={user} />}
/>
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
<Route path="/" element={<HomePage />} />
<Route path="*" element={<Error404 />} />
</Routes>
</main>
<Footer />
</div>
);
}
export default App;
**CardDetailsConverotr.jsx:**
import { useParams } from "react-router-dom";
import CardDetails from "./CardDetails";
const CardDetailsConvertor = () => {
const { id } = useParams();
return <CardDetails id={id} />;
};
export default CardDetailsConvertor;
所以如果您能提供帮助,我会很高兴 谢谢你!
I have a site with cards and when you click on some card you need to see the same card but with another details. But everytime I click on some card I get this massgae in the terminal:
Cast to ObjectId failed for value "undefined" (type string) at path "_id" for model "card"
Here What I wrote:
**
CardDatails.jsx**
import React, { Component } from "react";
import PageHeader from "../common/pageHeader";
import { getCard } from "../../services/cardService";
class CardDetails extends Component {
state = {
card: {
adress: "",
bizNumber: "",
createdAt: "",
description: "",
image: { url: "", alt: "" },
likes: [],
phone: "",
title: "",
},
errors: {},
isMounted: false,
};
async componentDidMount() {
try {
const { data } = await getCard(this.props.id);
this.setState({ card: { card: data, isMounted: true } });
} catch (error) {
this.setState({ errors: error.massage });
}
}
render() {
const { card } = this.state;
const {
title,
description,
image: { url, alt },
address,
phone,
bizNumber,
createdAt,
likes,
} = card;
return (
<React.Fragment>
<PageHeader
title={`Business Card of: ${title}`}
subTitle={`Businness Description: ${description}`}
/>
<div className="card-body p-2">
<div>
<img
style={{ maxWidth: "400px" }}
src={url}
className="card-img"
alt={alt}
></img>
<br />
<strong>Tel: </strong>
{phone}
</div>
<div>
<strong>Address: </strong>
{address}
</div>
<div>
<strong>Card Number: </strong>
{bizNumber}
</div>
<div>
<strong>Created At: </strong>
{createdAt}
</div>
<div>
<strong>likes: </strong>
{likes}
</div>
</div>
</React.Fragment>
);
}
}
export default CardDetails;
App.js:
import { useParams } from "react-router-dom";
import CardDetails from "./CardDetails";
const CardDetailsConvertor = () => {
const { id } = useParams();
return <CardDetails id={id} />;
};
export default CardDetailsConvertor;
import HomePage from "./layout/main/Home";
import About from "./layout/main/About.jsx";
import { Routes, Route } from "react-router-dom";
import Error404 from "./layout/main/Error404";
import Header from "./layout/header/Header.jsx";
import Footer from "./layout/footer/footer.jsx";
import BizSignup from "./layout/main/BizSignup";
import Logout from "./layout/main/Logout";
import MyCards from "./layout/main/MyCards";
import MyFavoriteCards from "./layout/main/MyFavoriteCards";
import Login from "./layout/main/Login";
import Signup from "./layout/main/Signup";
import { ToastContainer } from "react-toastify";
import "react-toastify/dist/ReactToastify.css";
import { getCurrentUser } from "./services/userService";
import CreateCard from "./layout/main/CreateCard";
import EditCardConvertor from "./layout/main/editCardConvertor";
import CardDetails from "./layout/main/CardDetails";
import CardDetailsConvertor from "./layout/main/CardDetailsConvertor";
function App() {
const user = getCurrentUser();
return (
<div className="App">
<Header user={user} />
<ToastContainer />
<main style={{ minHeight: "85vh" }}>
<Routes>
<Route path="/about" element={<About />} />
<Route path="/biz-signup" element={<BizSignup />} />
<Route path="/logout" element={<Logout />} />
<Route path="/my-cards" element={<MyCards user={user} />} />
<Route path="/create-card" element={<CreateCard user={user} />} />
<Route
path="/card-details-converotr"
element={<CardDetailsConvertor user={user} />}
/>
<Route
path="/edit-card/:id"
element={<EditCardConvertor user={user} />}
/>
<Route path="/card-details/:id" element={<CardDetails />} />
<Route
path="/my-fav-cards"
element={<MyFavoriteCards user={user} />}
/>
<Route path="/login" element={<Login />} />
<Route path="/signup" element={<Signup />} />
<Route path="/" element={<HomePage />} />
<Route path="*" element={<Error404 />} />
</Routes>
</main>
<Footer />
</div>
);
}
export default App;
**CardDetailsConverotr.jsx:**
import { useParams } from "react-router-dom";
import CardDetails from "./CardDetails";
const CardDetailsConvertor = () => {
const { id } = useParams();
return <CardDetails id={id} />;
};
export default CardDetailsConvertor;
So if you can help I will be happy
Thank you!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

CardDetails
组件未传递任何 props,因此this.props.id
未定义。您可以将
CardDetails
转换为功能组件,以便它可以使用useParams
挂钩来访问id
路由参数,或者您也可以创建自定义withRouter
高阶组件来执行此操作并将参数作为要在组件中访问的道具注入。我不会介绍转换,但以下是一个简单的
withRouter
HOC:...
CardDetails
component isn't passed any props, sothis.props.id
is undefined.You can either convert
CardDetails
to a functional component so it can use theuseParams
hook to access theid
route param, or you can create a customwithRouter
Higher Order Component to do this and inject the params as a prop to be accessed in component.I won't cover conversion, but the following is a simple
withRouter
HOC:...