React中如何消除useEffect的缺失依赖警告

这个警告是React的ESLint规则react-hooks/exhaustive-deps触发的，它的目的是确保你的副作用逻辑能正确响应依赖变量的变化。咱们先拆解问题，再一步步解决：

问题根源 #

你当前的useEffect没有声明依赖数组，这会导致React在每次组件渲染时都执行这个副作用——既会发起不必要的重复网络请求，也会触发ESLint的依赖检查警告，因为它无法确定你是否遗漏了需要监听的变量。

核心解决方案 #

根据你的业务场景（只需要在自定义hook初始化时加载一次香料数据），最合理的解决方式是添加空依赖数组：

import { useEffect, useState } from "react";
const useSpices = () => {
  const [spices, setSpices] = useState([])
  
  useEffect(() => {
    fetch("http://localhost:5000/spices")
      .then(res => res.json())
      .then(data => setSpices(data))
      // 建议添加错误处理，避免请求失败无提示
      .catch(err => console.error("加载香料数据失败：", err))
  }, []); // 空数组表示仅在hook首次挂载时执行
  
  return [spices, setSpices];
}
export default useSpices;

补充说明

• 空依赖数组告诉React：这个副作用不需要依赖任何变量，只需要运行一次。
• 你可能会疑惑：useEffect里用到了setSpices，为什么不用把它加入依赖？因为React保证useState返回的更新函数（比如setSpices）在组件整个生命周期里引用都是稳定的，所以即使不加入依赖，也不会引发bug。如果想严格遵守ESLint规则，把setSpices加入依赖数组也完全没问题，效果是一样的：

  useEffect(() => {
    // ... 逻辑不变
  }, [setSpices]);
  

扩展场景：如果URL是动态的 #

如果以后你的请求URL需要根据其他变量（比如props、state）动态变化，记得把这个变量加入依赖数组，这样当变量更新时，useEffect会自动重新执行请求：

const useSpices = (baseUrl) => {
  const [spices, setSpices] = useState([])
  
  useEffect(() => {
    fetch(`${baseUrl}/spices`)
      .then(res => res.json())
      .then(data => setSpices(data))
      .catch(err => console.error("加载香料数据失败：", err))
  }, [baseUrl, setSpices]); // 动态URL作为依赖
  
  return [spices, setSpices];
}

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