如何修复使用useEffect React Hook时出现的缺失依赖警告

这不是针对问题场景的特定答案，而是更普遍的情况，并且涵盖当useEffect或extract和import不起作用时的情况。 useRef 的应用场景:

有时候，useEffect应该有一个空数组，但你仍然希望在useEffect内部使用一些状态，但你不想将它们作为依赖项注入，同时你可能已经尝试过 useCallback ，现在 React 抱怨 useCallback 的依赖关系，你陷入了困境。 在这种情况下，你可以在某些情况下使用 useRef。例如：

const locationRef = useRef(location);
useEffect(()=>{
const qs = locationRef.current.search
...
},[])

使用该技术时，您应当小心并了解 useRef 不会触发渲染过程。

如果你想以不同的方式查看这个问题，你只需要了解React具有哪些非“exhaustive-deps”的选项。在effect中使用闭包函数的一个原因是每次渲染它都会被重新创建/销毁。

所以，在React Hooks中有多种被认为是稳定和未耗尽的方法，你不必应用于“useEffect”的依赖项，并且不会违反“react-hooks/exhaustive-deps”的规则。例如，“useReducer”或“useState”的第二个返回变量就是一个函数。

const [,dispatch] = useReducer(reducer, {});

useEffect(() => {
    dispatch(); // Non-exhausted - ESLint won't nag about this
}, []);

const [,dispatch] = useReducer((current, update) => {
    const { foobar } = update;
    // Logic

    return { ...current, ...update };
}), {});

const [foobar, setFoobar] = useState(false);

useEffect(() => {
    dispatch({ foobar }); // non-exhausted `dispatch` function
}, [foobar]);

在我的情况下，我的本地变量organization出现了这个警告，当我将organization放入依赖数组中时，useEffect会无限制地进行获取。因此，如果您遇到类似我的问题，请使用带有依赖关系数组的useEffect并进行分离：

因为如果您有多个调用API的函数来修改状态，它会多次调用useEffect。

来自：

  const { organization } = useSelector(withOrganization)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getOrganization({}))
    dispatch(getSettings({}))
    dispatch(getMembers({}))
  }, [dispatch, organization])

To:

  const { organization } = useSelector(withOrganization)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getOrganization({}))
    dispatch(getSettings({}))
  }, [dispatch, organization])

  useEffect(() => {
    dispatch(getMembers({}))
  }, [dispatch])

您可以删除第二个参数类型数组[]，但是每次更新时也将调用fetchBusinesses()。如果您愿意，可以在fetchBusinesses()实现中添加一个IF语句。

React.useEffect(() => {
  fetchBusinesses();
});

function fetchBusinesses (fetch) {
  return fetch("theURL", { method: "GET" })
    .then(res => normalizeResponseErrors(res))
    .then(res => res.json())
    .then(rcvdBusinesses => {
      // some stuff
    })
    .catch(err => {
      // some error handling
    });
}

function YourComponent (props) {
  const { fetch } = props;

  React.useEffect(() => {
    fetchBusinesses(fetch);
  }, [fetch]);

  // ...
}

/* eslint-disable react-hooks/exhaustive-deps */

这将禁用整个文件的警告。

React.useEffect(() => {
    if (currentUser?.role !== "Student") {
        return history.push("/")
    }
}, [])

分辨率： 步骤1：将业务逻辑移动到单独的常量中。

现在的警告是：React Hook React.useEffect缺少依赖项：'roleChecking'。

const roleChecking = () =>{
   if (currentUser?.role !== "Student") {
        return history.push("/")
    }
}

React.useEffect(() => {
    roleChecking()
}, [])

  const roleRef = React.useRef();

  const roleChecking = () => {
    if (currentUser?.role !== "Student") {
      return history.push("/");
    }
  };
  roleRef.current = roleChecking;

  React.useEffect(() => {
   return roleRef.current();
  }, [currentUser?.role]);

搜索关键字以了解每个警告的详细信息。 要忽略警告，请在该行之前添加 // eslint-disable-next-line。

例如：useEffect 中使用的函数引起了警告。

useEffect(() => {
  handleConnectWallet();
}, []);

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

在组件中声明了fetchBusinesses函数。这意味着每次渲染都会声明新函数，从而触发钩子。

有两种方法可以解决这个问题。

1. 将fetchBusinesses函数声明移出组件。

2. 使用useCallback钩子包装fetchBusinesses函数。

第一种选项更可取。

在这种情况下，它可以工作，但如果fetchBusinesses在函数内部使用setState并调用它将重新渲染组件，因此您的fetchBusinesses将更改，因此useEffect将运行，这将创建一个无限循环。因此，盲目遵循eslint可能会导致额外的错误。

解决方案是在useCallback中使用[]，以使eslint满意。

const memoizedFetchBusinesses=useCallback(
        fetchBusinesses,
        [] // unlike useEffect you always have to pass a dependency array
       )

useEffect(()=>{
    memoizedFetchBusinesses();
},[memoizedFetchBusinesses]) 

const fetchBusinesses = useCallback(() => {
    return fetch("theURL", {method: "GET"}
    )
      .then(res => normalizeResponseErrors(res))
      .then(res => {
        return res.json();
      })
      .then(rcvdBusinesses => {
        // some stuff
      })
      .catch(err => {
        // some error handling
      });
  },[]);

然后在 useEffect 中

useEffect(() => {
    fetchBusinesses();
  }, [fetchBusinesses]);

useEffect(()=>{
const fetchBusinesses=()=>{
   console.log(useeffect fetchbussinesses functions)
}
 fetchBusinesses();
},[declare the variable used in useeffect hooks ])