如何修复使用React Hook的useEffect时出现的缺失依赖警告

你遇到的是eslint react-hooks/exhaustive-deps 规则的校验错误，原因是useEffect回调里用到了外部变量id，但没把它加入依赖数组里。下面给两种处理方案：

方案一：将'id'加入依赖数组（推荐） #

这是最规范的做法，id来自useParams()，属于路由参数，只有当路由中的id变化时才会触发useEffect重新执行，不会导致无限循环（无限循环通常是依赖了每次渲染都会重建的引用类型值，比如对象/数组，而id是基本类型，不会频繁变化）。修改后的代码：

export default function ItemDetail({ cartItems, setCartitems }) {
    const [product, setProduct] = useState(null);
    const [qty, setQty] = useState(1);
    const { id } = useParams();

    useEffect(() => {
        // 用模板字符串让URL更易读
        fetch(`${process.env.REACT_APP_URL}/product/${id}`)
            .then(res => res.json())
            .then(res => setProduct(res.product))
    }, [id]) // 把id加入依赖数组
}

这样既符合hooks规则，又能保证路由id变化时自动重新请求对应商品数据，逻辑更严谨。

方案二：忽略eslint警告（不推荐） #

如果确实不想添加依赖，可以用eslint注释跳过该规则校验，但要注意：后续如果路由id变化，useEffect不会重新执行，会导致页面展示旧数据。代码示例：

export default function ItemDetail({ cartItems, setCartitems }) {
    const [product, setProduct] = useState(null);
    const [qty, setQty] = useState(1);
    const { id } = useParams();

    useEffect(() => {
        fetch(`${process.env.REACT_APP_URL}/product/${id}`)
            .then(res => res.json())
            .then(res => setProduct(res.product))
    // 忽略该useEffect的依赖校验
    // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [])
}

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