useEffect 不调用答案

【问题标题】：useEffect not calluseEffect 不调用
【发布时间】：2022-01-25 01:10:05
【问题描述】：

我目前在使用 React 应用时遇到问题。我有一个没有被调用的高级 useEffect 。我有另一个具有类似代码的项目，它可以工作。通常，每次我从我的应用程序发出 HTTP 调用时，我都应该调用我的 useEffect，但没有任何反应。

有没有人知道谁可能会阻止？

非常感谢您的帮助

我的 app.js

const App = () => (
  <Provider store={store}>
    <AuthProvider>
      <QueryClientProvider client={QueryClient()}>
        <ConnectedRouter history={history}>
          <>
            <Header />
            <AppNavigation />
            <AuthModalError />
          </>
        </ConnectedRouter>
      </QueryClientProvider>
    </AuthProvider>
  </Provider>
);

在 app.js 中调用的我的 authProvider 组件

const AuthProvider = ({ children }) => {
  const [go, setGo] = useState(false);

  const token = "987646543216548789";
  useAxiosToken(token);

  useEffect(() => {
    setGo(token !== undefined);
  }, [token]);

  if (!go) return null;
  console.log("Authenticated !! And now display application");

  return <IdentityProvider value={token}>{children}</IdentityProvider>;
};

AuthProvider.propTypes = { children: PropTypes.node };

export default AuthProvider;

最后是包含不会触发的 useEffect 的文件。

const removeTokenInterceptor = (id: number | null) => {
  if (id !== null) axios.interceptors.request.eject(id);
};

const addTokenInterceptor = (token: string) =>
  axios.interceptors.request.use((requestConfig) => ({
    ...requestConfig,
    headers: { ...requestConfig.headers, Authorization: `${token}` },
  }));

const useAxiosToken = (token: string | undefined): void => {
  const interceptor = useRef<number | null>(null)

  useEffect(() => {
    if (token) {
      interceptor.current = addTokenInterceptor(token);
    }
    console.log("Call useEffect in useAxiosToken file");
    return () => removeTokenInterceptor(interceptor.current);
  }, []);
};

export default useAxiosToken;

佩德罗。

【问题讨论】：

您的意思是useEffect 从未被触发还是仅被触发一次？在第二种情况下它是正确的，因为你没有在 deps 数组上放任何东西。

标签： javascript reactjs react-hooks

【解决方案1】：

如果您希望您的 useEffect 每次发生变化时都被调用，您需要将该“某物”指定为 useEffect 的依赖项：

useEffect(() => {
    if (token) {
        interceptor.current = addTokenInterceptor(token)
    }
    console.log('Call useEffect in useAxiosToken file')
    return () => removeTokenInterceptor(interceptor.current)
}, [token])

注意useEffect 的最后一个参数。里面有[token]。

【讨论】：