如何解决 "React Hook useEffect has a missing dependency. Either include it or remove the dependency array" 问题？

Question

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

React Hook useEffect has a missing dependency: 'getUpperGroups'. Either include it or remove the dependency array"

我的代码是：

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);
}

Answer 1

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

尝试如下：

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

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

Answer 2

您可以：

禁止整个项目的规则：转到 .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

Answer 3

你有两个错误。

1-你在useEffect之后定义了getUpperGroups，所以你不能把它添加到useEffect的依赖列表中。

2- 如果您将 getUpperGroups 添加到 useEffect 依赖项列表中，useEffect 将在每个 re-render 上运行并且您给出一个 re-render 错误循环。

所以有两种解决方案。

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);
}

Answer 4

这个对我有用。

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

//eslint-disable-next-line

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

如何解决 "React Hook useEffect has a missing dependency. Either include it or remove the dependency array" 问题？

How to fix "React Hook useEffect has a missing dependency. Either include it or remove the dependency array" problem?

typescript

reactjs

react-redux

react-hooks

react-typescript