react-router-dom点击同路径不同参数Link时useParams不更新问题

你的组件代码存在两个关键问题，导致点击链接后URL变化但组件未正确加载数据：

1. useEffect回调的async写法错误 #

你在useEffect中直接返回了一个async函数：

useEffect(() => async () => { ... }, [id])

React的useEffect回调不能是async函数——因为async函数会返回Promise，而React要求回调要么返回清理函数（函数类型），要么不返回任何值。这种写法会导致React无法正确处理副作用的执行逻辑，进而影响数据请求和状态更新的触发。

2. 状态更新时丢失原有字段 #

初始化userInfo状态包含user和listItems两个字段，但调用setUserInfo时只传入了listItems：

setUserInfo({ listItems: res2.data })

这会直接覆盖原有的user字段，可能导致组件依赖user的部分渲染异常。

修正后的代码 #

const User = () => {
  let { id } = useParams()
  const [userInfo, setUserInfo] = useState({
    user: {},
    listItems: []
  })

  const { listItems } = userInfo

  useEffect(() => {
    // 在useEffect内部定义async函数并调用
    const fetchListItems = async () => {
      try {
        if (id) {
          const res2 = await axios.get(`/api/listItems/${id}`)
          // 合并原有状态，保留user字段
          setUserInfo(prevState => ({
            ...prevState,
            listItems: res2.data
          }))
          console.log('render')
        }
      } catch (err) {
        console.error(err)
      }
    }

    fetchListItems()
  }, [id])

  return (
    // 你的JSX内容
  )
}

额外注意事项 #

• 如果需要处理重复请求（比如快速切换id时取消旧请求），可以在useEffect中使用AbortController终止未完成的axios请求，避免状态更新混乱。
• 确保组件被正确包裹在react-router-dom的Router组件范围内（你提到URL能正确变化，这一点大概率没问题）。

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