类型错误：使用反应路由器时无法读取未定义的属性“图像”

Question

我正在使用 react-router 。 我已经将数据存储在 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>

它给出了这个错误类型错误：无法读取未定义的属性“图像”

还-

当我这样做时 - 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>