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

Question

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' function 使得 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' function 使得 useCallback Hook 的依赖关系在每次渲染时都会发生变化。 要解决此问题，请将“getNameList”定义包装到它自己的 useCallback() Hook 中

Answer 1

将您的setDefaultState声明更改为：

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

不要忘记import React, {..., useCallback } from 'react'

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

Answer 2

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