React Hook useEffect 缺少一个依赖项：'callDayList'。包括它或删除依赖数组答案

【问题标题】：React Hook useEffect has a missing dependency: 'callDayList'. Either include it or remove the dependency arrayReact Hook useEffect 缺少一个依赖项：'callDayList'。包括它或删除依赖数组
【发布时间】：2021-06-03 05:25:56
【问题描述】：

React useState keep giving me undefined 这是我最后一个问题，对我帮助很大。

我在更新状态时遇到了问题，我理解了原因。但它给我带来了另一个问题。

const [urlList, setUrlList] = useState(0);

    const callDayList = () =>{
        
        Axios.post('http://localhost:3001/api/get',{    
        passNum :urlList,
        });
    };
    useEffect(() => {callDayList();},[urlList]);

这是我的代码，当 urlList 发生变化时，我想执行 callDayList 并传递 urlList 的值。当我研究useEffect时，我发现了问题，如果我在callDayList中包含urlList，它会导致无限重新渲染错误。但是我想在 urlList 更改时传递它的值。我该如何解决？

【问题讨论】：

标签： use-effect

【解决方案1】：

由于您没有在 useEffect 挂钩中使用urlList，因此引发了警告。使用变量或更新callDayList方法。

const [urlList, setUrlList] = useState(0);

const callDayList = (list) =>{ 
       Axios.post('http://localhost:3001/api/get',{    
       passNum :list,
    });
};
useEffect(() => {callDayList(urlList);},[urlList]);

或

const [urlList, setUrlList] = useState(0);

const callDayList = () =>{ 
       Axios.post('http://localhost:3001/api/get',{    
       passNum :urlList,
     });
};
useEffect(callDayList,[urlList]);

【讨论】：

【解决方案2】：

另一种解决方案是使用React.useCallback。

现在，callDayList 在每次渲染时都会发生变化，这是您无法将其添加到依赖项列表的原因之一。为防止这种情况，请将函数包装在 useCallback:

const callDayList = React.useCallback(() => {
  Axios.post('http://localhost:3001/api/get', {    
    passNum: urlList,
  });
}, [urlList]);

现在，callDayList 将仅在 urlList 更改时更改。现在你可以重写你的useEffect：

React.useEffect(callDayList, [callDayList]);

现在 callDayList 仅在其更改时调用，并且仅在 urlList 更改时才更改 - 这就是您想要的。

【讨论】：