類型錯誤：使用反應路由器時無法讀取未定義的屬性“圖像”

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>