React Hook useEffect 在 reactjs useEffect 中缺少依赖项答案

【问题标题】：React Hook useEffect has a missing dependency in reactjs useEffectReact Hook useEffect 在 reactjs useEffect 中缺少依赖项
【发布时间】：2020-07-24 06:17:48
【问题描述】：

const [data, setData] = useState(undefined);
useEffect(() => {
    if (changeRequests.data) {
        setData(setDefaultState(changeRequests.data));
    }
}, [changeRequests.data, setData,setDefaultState ]);

const setDefaultState = data => {
    let names = getNameList(data);
    setSelectedItems(names);
}

“setDefaultState”函数使 useEffect Hook（第 78 行）的依赖关系在每次渲染时都发生变化。将它移到 useEffect 回调中。或者，将“setDefaultState”定义包装到它自己的 useCallback() Hook 中

const [resultsFallback] = useState([]);
const getNameList = res => {
let jList = getJData(res);
let jNames = resultsFallback;
jNames = jList.map(j => {
    return `${j.joggers}`
});
return jNames;

}

'getNameList' 函数使 useCallback Hook 的依赖关系在每次渲染时都发生变化。要解决此问题，请将“getNameList”定义包装到它自己的 useCallback() Hook

【问题讨论】：

您可以将setDefaultState 包含在依赖项列表中，这将使警告消失
如果 setDefaultState 没有在其他地方使用，您可以将它移到 useEffect 函数中，或者按照 Barry 的建议进行操作

标签： reactjs

【解决方案1】：

将您的 setDefaultState 声明更改为：

const setDefaultState = useCallback((data) => {
  let names = getNameList(data);
  setSelectedItems(names);
}, [getNameList, setSelectedNames])

别忘了import React, { ..., useCallback } from 'react'

'getNameList' 函数使 useCallback Hook 的依赖关系在每次渲染时都发生变化。要解决此问题，请将“getNameList”定义包装到它自己的 useCallback() Hook 中

【讨论】：

【解决方案2】：

对于错误 1)：linter 告诉您，您依赖于可能更改的外部值，如果某些值在重新渲染之间没有更改，您可以告诉 React 跳过应用效果。如果您的数组确实不改变值，它将保持不变。 2）数据应该在组件内部使用，这里你将它作为参数传递，数据应该在JSX表达式内部，重新渲染后会改变值。

【讨论】：