TypeError：使用反应路由器时无法读取未定义的属性“图像”答案

【问题标题】：TypeError: Cannot read property 'image' of undefined while using react routerTypeError：使用反应路由器时无法读取未定义的属性“图像”
【发布时间】：2020-10-08 16:53:38
【问题描述】：

我正在使用 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>

它给出了这个错误-TypeError: Cannot read property 'image' of undefined

还有-

当我这样做时 -const clickedPost = data.posts.find(x => x._id === '12'); 有效

我做错了什么。

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

如果你是console.log 你的props.match.params.id，我打赌你会发现它是:to。您需要将 <Link /> 代码更改为实际拥有所需的 ID，如下所示：

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

【讨论】：