Question

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

反应挂钩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);
}

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

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

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

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

Answer 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

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

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

4 个答案: