关于hooks中uesEffect的eslint问题

Question

老师，请问一下，根据官网中的eslint配置Hooks（https://react.docschina.org/docs/hooks-rules.html），在eslint中配置了 “react-hooks/exhaustive-deps”: “warn” // 检查 effect 的依赖，在useEffect使用异步请求获取数据之后，更新state时，就一直提示effect的依赖警告
React Hook useEffect has missing dependencies: ‘getList’ Either include them or remove the dependency array

const getTodoList = (props) =>{
const [list, setList] = React.useState([]);
const {detail} = props;
useEffect(() =>{
getList();
},[detail.id])
}

const getList = async() => {
if(detail.id){
const result = await fetch(/api/getList/${detail.id});
setLilt(result.data);
}
}

Answer 1

Jokcy 2021-11-07 21:16:20

你在useEffect里面使用了getList了呀，所以也要放在第二个参数的数组里面

• 提问者 慕桂英7937985 #1

  我把getList放在第二个参数中还是会提示相同的提示
  React.useEffect(() =>{
      getList();
    },[id, getList()]);
  
  不加（）时，getList这个函数中则出现这个提示这个警告，The 'getList' function makes the dependencies of useEffect Hook (at line 63) change on every render. To fix this, wrap the definition of 'getList' in its own useCallback() Hook.
  React.useEffect(() =>{
      getList();
    },[id, getList])