React中如何在dispatch方法中使用useParams()将数据存入Redux？

你当前代码中useParams()的用法存在多处不符合规则的问题：

• 违反React Hook调用规则：useParams()属于React Hook，只能在组件函数的顶层作用域调用，不能嵌套在useEffect回调、条件判断、循环等内部作用域执行
• API使用方式错误：useParams()调用时不需要传入任何参数，执行后会直接返回当前路由匹配到的所有动态参数对象，直接从返回值中解构需要的字段即可
• 变量引用错误：你在useEffect的依赖数组中使用了id变量，但从未在组件作用域内定义过该变量，运行时会直接抛出引用错误
• 冗余旧版API：组件入参里的{match}是React Router v5的路由传参写法，v6版本不再向组件注入match属性，这段代码没有实际作用
• 空值访问风险：首次渲染时Redux中存储的post数据还未拉取完成，直接访问post.image、post.title等属性会触发空指针报错
• 属性绑定错误：img标签的alt属性写成了alt='{post.category}'，单引号包裹的内容会被当做普通字符串渲染，无法读取post对象的category字段值

1. 在组件顶层作用域调用useParams()，根据路由配置的动态参数名解构出文章ID（如果你的路由路径是/post/:id，就解构id，参数名必须和路由配置的动态段完全一致）
2. 在useEffect中直接使用解构得到的id，dispatch拉取文章详情的action
3. 补充加载、错误状态的兜底渲染，避免空值报错
4. 修正img标签alt属性的绑定写法
5. 补全useEffect的依赖项，避免Hook校验警告

import React, {useEffect} from 'react'
import {useParams} from 'react-router-dom'
import '../resources/scss/blogpost.scss'

import { useDispatch, useSelector } from 'react-redux'
import { listPost } from '../actions/postActions'

function BlogPage() {
    // 顶层调用Hook，解构路由上的文章ID
    const { id } = useParams()
    const postDetails = useSelector(state => state.postDetails)
    
    const { error, loading, post } = postDetails
    const dispatch = useDispatch()
    
    useEffect(() => {
        dispatch(listPost(id))
    }, [dispatch, id])

    // 加载状态兜底
    if (loading) return <div>文章加载中</div>
    // 错误状态兜底
    if (error) return <div>加载失败：{error}</div>

  return (
    <div>
        <div className='post_container'>
          <img className='post_image' src={post.image} alt={post.category} /> &nbsp;
          <h3>{post.title}</h3> &nbsp;
          <p>{post.author}</p>
          <p className='post_excerpt'>"{post.excerpt}"</p> &nbsp;
          <div className='post_body' dangerouslySetInnerHTML={{__html:post.content}}></div>
          
          <h1 className='comment_head'>Comments</h1>
        </div> 
    </div>
  )
}

export default BlogPage

确保你的路由配置中，详情页路由确实定义了对应动态参数，例：

// 路由配置示例
<Route path="/blog/:id" element={<BlogPage />} />

如果动态参数名不是id，比如是postId，那useParams解构的时候也要对应写const { postId } = useParams()，传参的时候也传postId即可。

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