如何解決“React Hook useEffect 缺少依賴項。包含它或刪除依賴項數組”的問題？

Question

我想使用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);
}

Answer 1

您可以：

1. 為整個項目禁止該規則：轉到 .eslintrc 文件並將'react-hooks/exhaustive-deps': 'error'更改為'react-hooks/exhaustive-deps': 'warn'或'react-hooks/exhaustive-deps': 'off'

2. 僅在這種情況下禁止規則：

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 2

你有兩個錯誤。

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

Answer 3

這個對我有用。

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

//eslint-disable-next-line

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

Answer 4

可能我會嘗試將getUpperGroups的定義移動到useEffect 。 您也可以使用.map()和groups狀態的先前狀態。

嘗試如下：

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

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

Answer 5

只需添加getUpperGroups到DEPS陣列useEffect

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

但最好將代碼本身移動到useEffect