javascript - 如何避免 "React Hook useEffect has a missing dependency"和无限循环

Question

我写了一个像这样的 react-js 组件:

import Auth from "third-party-auth-handler";
import { AuthContext } from "../providers/AuthProvider";

export default function MyComponent() {
  const { setAuth } = useContext(AuthContext);

  useEffect(() => {
    Auth.isCurrentUserAuthenticated()
      .then(user => {
        setAuth({isAuthenticated: true, user});
    })
    .catch(err => console.error(err));
  }, []);
};

使用以下 AuthProvider 组件:

import React, { useState, createContext } from "react";

const initialState = { isAuthenticated: false, user: null };
const AuthContext = createContext(initialState);

const AuthProvider = (props) => {
  const [auth, setAuth] = useState(initialState);

  return (
    <AuthContext.Provider value={{ auth, setAuth }}>
      {props.children}
    </AuthContext.Provider>
  )
};

export { AuthProvider, AuthContext };

一切正常，但我在开发人员的控制台中收到此警告:

React Hook useEffect has a missing dependency: 'setAuth'. Either include it or remove the dependency array react-hooks/exhaustive-deps

如果我将 setAuth 添加为 useEffect 的依赖项，警告就会消失，但我会无限期地运行 useEffect()循环，然后应用程序就会崩溃。
我知道这可能是因为每次安装组件时 setAuth 都会重新实例化。
我还想我可能应该使用 useCallback() 来避免每次都重新实例化函数，但我真的不明白如何将 useCallback 与 中的函数一起使用useContext()

Answer 1

如果你只想在组件挂载时运行一次useEffect调用，我认为你应该保持原样，这样做没有错。但是，如果您想摆脱警告，您应该像您提到的那样将 setAuth 包装在 useCallback 中。

const setAuthCallback = useCallback(setAuth, []);

然后在useEffect中放入你的依赖列表:

useEffect(() => {
    Auth.isCurrentUserAuthenticated()
      .then(user => {
        setAuth({isAuthenticated: true, user});
    })
    .catch(err => console.error(err));
  }, [setAuthCallback]);

如果您可以控制 AuthContext Provider，最好将您的 setAuth 函数包装在里面。

OP编辑后:这很有趣，setAuth 是 useState 的一个函数，它应该总是相同的，它不应该导致无限循环，除非我遗漏了一些明显的东西

编辑 2:

好的，我想我知道这个问题了。好像在打电话

setAuth({ isAuthenticated: true, user });

正在重新实例化 AuthProvider 组件，它会重新创建导致无限循环的 setAuth 回调。复制:https://codesandbox.io/s/heuristic-leftpad-i6tw7?file=/src/App.js:973-1014

在正常情况下，您的示例应该可以正常工作