类型错误：使用 react 路由器时无法读取未定义的属性"映像"

Question

我正在使用react路由器。我把数据存储在data.js中，它是这样的-

export default {
posts : [{
_id:'12',
user_id:'123',
user: 'user1',
image:'/images/c1.jpg',
likes: '24'},{......}]

我已经这样链接了-<Link to="/post/:id"></Link>以及给定的路由路径-<Route path="/post/:id" component={postScreen} />

但在postScreen.js中，当我在做-时

const clickedPost = data.posts.find(x => x._id === props.match.params.id );
return (
<div>


<img src={clickedPost.image} alt="post" ></img>

</div>

它给出的错误类型错误：无法读取未定义的属性"image">

也-

当我这样做的时候-const clickedPost = data.posts.find(x => x._id === '12');它工作

我做错了什么。

Answer 1

如果你console.log你的props.match.params.id，我打赌你会发现它是:to。您需要更改<Link />代码，使其具有您想要的ID，例如：

<Link to={`/post/${someId}`}></Link>