提问人：Mat 提问时间：3/3/2023 最后编辑：Ahmed SbaiMat 更新时间：3/13/2023 访问量：61
React - 使用 navigate（） 重定向，将道具发送到页面
React - Redirect with navigate(), send props to page
问：
我在我的页面上呈现了几张卡片，它们都指向同一个页面，如下所示：
{
notes.map((card) => (
<div key={card.id} onClick={() => navigate("/EditNotes", { card })}>
<NoteCard title={card.NoteTitle} bgColor={card.CardColor} />
</div>
));
}
在本节中，我怎样才能将 的值发送到页面，因为这似乎不起作用。navigate('/EditNotes', {card})card/EditNotes
在页面中，我这样做：EditNotes
const EditNotes = ({ card }) => {
console.log(card);
//...
}
然而，节目
有谁知道如何使用感谢传递道具console.logundefiendnavigate()
答：
1赞
Tomasz Ostroga
3/3/2023
#1
尝试将 'card' 属性作为对象传递给 'EditNotes' 组件，并将状态键作为 navigate（） 中的第二个参数：
{
notes.map((card)=>(
<div key={card.id} onClick={()=> navigate('/EditNotes', { state: { card } })}>
<NoteCard title={card.NoteTitle} bgColor={card.CardColor} />
</div>
))
}
const EditNotes = ({ location }) => {
const { card } = location.state;
console.log(card);
// rest of the code...
};
然后，如果有意义，您可以从“EditNotes”组件中的 location.state 对象访问卡片对象。
评论
0赞
Mat
3/3/2023
谢谢 - 我收到以下错误：TypeError：无法读取未定义的属性（读取“状态”）。我不是在导入什么东西，或者？
1赞
Tomasz Ostroga
3/4/2023
location 对象 （location.state） 在您尝试访问它的组件 （EditNotes） 中未定义。要使 EditNotes 能够访问 location 属性，您需要确保将其呈现为应用程序中 <Route> 组件的子组件。
1赞
dom1
3/3/2023
#2
然后，您可以通过其ID获取注释。navigate/EditNotes/${card?.id}
{
notes.map((card)=>(
<div key={card.id} onClick={()=> navigate(`/EditNotes/${card?.id}`)}>
<NoteCard title={card.NoteTitle} bgColor={card.CardColor} />
</div>
))
}
然后在您的路由器中：
<Route path="/EditNotes/:id" element={<EditNote />} />
然后在 EditNotes 组件中：
const EditNotes = ()=>{
const { id } = useParams(); //get the id passed in the route
//get the note by its id
//...
})
上一个：Vue-注意音频时间变化
评论