React JS使用Link传递id时出现useEffect依赖缺失报错如何解决？

你的问题由两个核心原因导致：

1. 当前使用的是React Router v6版本，该版本已废弃组件props中的match对象，原有写法无法正常获取路由参数id，是传参失败的核心原因
2. useEffect回调中调用了外部定义的fetchiditem函数，没有将其加入依赖数组，触发了react-hooks的ESLint校验警告

第一步：修改Shopdetails.js代码 #

import { useParams } from 'react-router-dom'
import { useEffect, useState } from 'react'

function Shopdetails() {
  // 用useParams获取路由id参数
  const { id } = useParams()
  // 初始值设为null，避免渲染时报错
  const [itemid, setItems] = useState(null)

  useEffect(() => {
    // 将fetch逻辑移到useEffect内部，避免依赖警告
    const fetchiditem = async () => {
      const data = await fetch(`https://fortnite-api.theapinetwork.com/item/get?id=${id}`)
      const itemdata = await data.json()
      setItems(itemdata.data.item)
    }
    fetchiditem()
  }, [id]) // 仅当id变化时重新触发请求

  // 加加载态判断，避免未请求完成时访问不存在的属性报错
  if (!itemid) return <div>加载中...</div>

  return (
    <div>
      <img src={itemid.images.icon} alt={itemid.name} />
    </div>
  )
}

export default Shopdetails

可选：修复Shop.js的同类型依赖警告 #

Shop.js中的useEffect也存在相同的依赖校验问题，可统一修改：

import { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'

function Shop() {
  const [items, setItems] = useState([])

  useEffect(() => {
    const fetchitems = async () => {
      const data = await fetch("https://fortnite-api.theapinetwork.com/upcoming/get")
      const itemsdata = await data.json()
      setItems(itemsdata.data)
    }
    fetchitems()
  }, []) // 空依赖数组，仅组件挂载时执行一次

  return (
    <div>
      {items.map(item => (
        <h1 key={item.itemId}>
          <Link to={`/shop/${item.itemId}`}>{item.item.name}</Link>
        </h1>
      ))}
    </div>
  )
}

export default Shop

补充说明 #

• App.js中的代码无需修改，React Router v6默认匹配精确路由，原exact属性可删除也可保留，不影响功能
• 若不想把fetch函数移到useEffect内部，也可以用useCallback包裹fetch函数后加入依赖数组，避免重复创建函数导致useEffect重复执行
• 不推荐直接用注释屏蔽ESLint警告，会埋下闭包陷阱的隐患

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