reactjs - 如何修复使用 useEffect React Hook 时缺少依赖项警告

Question

使用 React 16.8.6(在之前的版本 16.8.3 上效果很好)，当我尝试阻止获取请求上的无限循环时，我收到此错误:

./src/components/BusinessesList.js
Line 51:  React Hook useEffect has a missing dependency: 'fetchBusinesses'.
Either include it or remove the dependency array  react-hooks/exhaustive-deps

我一直无法找到停止无限循环的解决方案。我不想使用 useReducer()。我确实找到了这个讨论 [ESLint] Feedback for 'exhaustive-deps' lint rule #14920 一个可能的解决方案是 如果你认为你知道自己在做什么，你总是可以//eslint-disable-next-line react-hooks/exhaustive-deps 。 我不是对我正在做的事情充满信心，所以我还没有尝试实现它。

我当前的设置是这样的， React hook useEffect runs continuously forever/infinite loop 唯一的评论是关于我不熟悉的 useCallback() 。

我目前如何使用useEffect()(我只想在开始时运行一次，类似于componentDidMount()):

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

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

Answer 1

如果您除了效果之外没有在任何地方使用 fetchBusinesses 方法，您可以简单地将其移至效果中并避免警告

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

但是，如果您在效果之外使用 fetchBusinesses，则必须注意两件事

1. 在挂载期间使用其封闭闭包使用 fetchBusinesses 作为方法时，您是否不将其作为方法传递，是否存在任何问题？
2. 您的方法是否依赖于从其封闭闭包接收的某些变量？您的情况并非如此。
3. 在每次渲染时，都会重新创建 fetchBusinesses，因此将其传递给 useEffect 会导致问题。因此，如果要将 fetchBusinesses 传递给依赖项数组，首先必须记住它。

总而言之，如果您在 useEffect 之外使用 fetchBusinesses，您可以使用 //eslint-disable-next- 禁用该规则行react-hooks/exhaustive-deps否则你可以将方法移到useEffect内部

要禁用该规则，您可以这样写

useEffect(() => {
   // other code
   ...
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
}, [])