如何解决“React Hook useEffect 缺少依赖项。包括它或删除依赖项数组”问题？答案

【问题标题】：How to fix "React Hook useEffect has a missing dependency. Either include it or remove the dependency array" problem?如何解决“React Hook useEffect 缺少依赖项。包括它或删除依赖项数组”问题？
【发布时间】：2023-03-15 11:23:01
【问题描述】：

我想使用useEffect，但是当我添加getUpperGroup 方法时，我收到警告：

React Hook useEffect 缺少一个依赖项：'getUpperGroups'。要么包含它，要么移除依赖数组"

我的代码是：

useEffect(() => {
  getUpperGroups();
  setContentData(contentGroupData);
}, [contentGroupData]);


const [contentData, setContentData] = useState<Fundation[]>([] as Fundation[]);
const [upperGroups, setUpperGroups] = useState({});

const getUpperGroups = () => {

   let newUpperGroups = upperGroups;

   contentGroupData.forEach(content=>{
     newUpperGroups = {...newUpperGroups, [content.id]: content.title};
   })

   setUpperGroups(newUpperGroups);
}

【问题讨论】：

您可以将getUpperGroups的定义移动到useEffect中。
怎么样？你能解释更多吗？
我忽略了警告，它的工作:(

标签： reactjs typescript react-redux react-hooks react-typescript

【解决方案1】：

我可能会尝试将getUpperGroups 的定义移动到useEffect。您也可以使用.map() 和groups 状态的先前状态。

尝试如下：

useEffect(() => {
  const getUpperGroups = () => {
     setUpperGroups(prevUpperGroups => contentGroupData.map((content) => ({
        ...prevUpperGroups,
        [content.id]: content.title
     })))
  }

  getUpperGroups();
  setContentData(contentGroupData);
}, [contentGroupData]);

【讨论】：

现在，我收到错误：React Hook useEffect 缺少依赖项：'upperGroups'。 :(
@SametSunman 另外，我现在已经修改为使用.map()，而之前的upperGroups 状态消除了这个问题。

【解决方案2】：

只需将getUpperGroups 添加到useEffect 中的deps 数组中

useEffect(() => {
  getUpperGroups();
  setContentData(contentGroupData);
}, [contentGroupData, getUpperGroups]);

但最好将代码本身移动到useEffect

【讨论】：

我收到错误：'getUpperGroups' 函数使 useEffect Hook（第 79 行）的依赖关系在每次渲染时都发生变化。将它移到 useEffect 回调中。或者，将“getUpperGroups”定义包装到它自己的 useCallback() Hook
据我了解，您粘贴的不是整个代码，因为您粘贴的代码中有一些变量已使用但不存在？
你可以这样做：
const getUpperGroups = useCallback(() => { let newUpperGroups = upperGroups; contentGroupData.forEach((content) => { newUpperGroups = { ...newUpperGroups, [content.id]: content.title }; }); setUpperGroups(newUpperGroups); }, [upperGroups]); useEffect(() => { getUpperGroups(); setContentData(contentGroupData); }, [getUpperGroups]);
但我建议将代码移动到 useEffect 中。很难向您展示重构的代码，因为您没有粘贴整个组件

【解决方案3】：

您可以：

为整个项目禁止该规则：转到 .eslintrc 文件并将 'react-hooks/exhaustive-deps': 'error' 更改为 'react-hooks/exhaustive-deps': 'warn' 或 'react-hooks/exhaustive-deps': 'off'
仅在这种情况下禁止规则：

useEffect(() => {
    getUpperGroups();
    setContentData(contentGroupData);
}, [contentGroupData]);


const [contentData, setContentData] = useState<Fundation[]>([] as Fundation[]);
const [upperGroups, setUpperGroups] = useState({});

const getUpperGroups = () => {

    let newUpperGroups = upperGroups;

    contentGroupData.forEach(content=>{
        newUpperGroups = {...newUpperGroups, [content.id]: content.title};
    })

    setUpperGroups(newUpperGroups);
} // eslint-disable-line react-hooks/exhaustive-deps

【讨论】：

我不明白。您通过关闭消息来修复错误？这对我来说就是这样，除非你能解释正在发生的事情实际上不是一个有效的警告？你能澄清一下吗？
这是一个 eslint 警告，因此它试图告诉您这不是“好的做法”，或者不建议这样做，因为结果可能会出现一些意外/不受欢迎的行为。你可以在这里阅读更多内容 [stackoverflow.com/questions/58866796/…。我希望澄清。

【解决方案4】：

你有两个错误。

1- 您在 useEffect 之后定义了 getUpperGroups，因此无法将其添加到 useEffect 依赖项列表中。

2- 如果您将 getUpperGroups 添加到 useEffect 依赖项列表中，useEffect 将在每次重新渲染时运行，并且您会给出一个重新渲染错误循环。

所以有两种解决方案。

1- 将 getUpperGroups 添加到 useEffect 中

const [contentData, setContentData] = useState<Fundation[]>([] as Fundation[]);
const [upperGroups, setUpperGroups] = useState({});


useEffect(() => {
  
  const getUpperGroups = () => {

   let newUpperGroups = upperGroups;

   contentGroupData.forEach(content=>{
     newUpperGroups = {...newUpperGroups, [content.id]: content.title};
   })

   setUpperGroups(newUpperGroups);
  }

  getUpperGroups();
}, [contentGroupData]);

2- 禁用 eslint

useEffect(() => {
  getUpperGroups();
  setContentData(contentGroupData);

  // eslint-disable-line react-hooks/exhaustive-deps
}, [contentGroupData]);


const [contentData, setContentData] = useState<Fundation[]>([] as Fundation[]);
const [upperGroups, setUpperGroups] = useState({});

const getUpperGroups = () => {

   let newUpperGroups = upperGroups;

   contentGroupData.forEach(content=>{
     newUpperGroups = {...newUpperGroups, [content.id]: content.title};
   })

   setUpperGroups(newUpperGroups);
}

【讨论】：

【解决方案5】：

这个对我有用。

只需在 useEffect 的最后一行添加此注释即可：

//eslint-disable-next-line

useEffect(() => {
  getUpperGroups();
  setContentData(contentGroupData);
  //eslint-disable-next-line
}, [contentGroupData]);

【讨论】：