React使用useParams与array.find展示博客详情内容全部相同问题求助

问题根因 #

你遇到的所有详情页内容一致的问题，核心错误出在AllBlogs.js的跳转链接逻辑：
你遍历所有博客渲染列表时，所有「阅读博客」的跳转链接都用了全局的blogPost.id，这个变量存的永远是最新提交的那篇博客的id，所以不管点哪篇文章的跳转入口，最终传递给详情页的id都是最新博客的id，自然查出来的内容永远相同。

另外还有一处隐藏逻辑问题：你在WriteBlogPost.js的输入事件handleChange里每次都会重新生成uuid赋值给博客id，意味着用户每输入一个字符，当前博客的id就会变更一次，虽然提交时最后一次生成的id会被存储，但属于不必要的逻辑，可能带来潜在问题。

修复方案 #

1. 修正AllBlogs.js的跳转链接，使用当前遍历到的单篇博客的id：

// 找到AllBlogs.js里的Link组件，替换为以下内容
<Link to={`/blogs/${post.id}`}>
    Read blog
</Link>

2. （可选优化）将uuid生成逻辑挪到提交博客的时机，避免输入过程中id频繁变更：
   修改WriteBlogPost.js的两个方法：

const handleChange = (e) => {
    const value = e.target.value
    setBlog({
        ...blog,
        // 删掉这里的id生成逻辑
        [e.target.name]: value
    })
}

const handleBlogPost = () => {
    // 提交时统一生成id
    const newBlog = {
        ...blog,
        id: uuidv4()
    }
    setBlogPost(newBlog);
    setAllBlogPosts([...allBlogPosts, newBlog]);
    history.push("/blogs")
}

完成第一处修改后你的详情页就能正常显示对应博客内容了。

内容的提问来源于stack exchange，提问作者sol_s