时间戳

首页 > 解决方案 > 由 axios 取消令牌引起的 react useEffect hook 无限循环 [react-hooks/exhaustive-deps]

reactjs - 由 axios 取消令牌引起的 react useEffect hook 无限循环 [react-hooks/exhaustive-deps]

问题描述

在我的反应组件中，我useEffect用来获取组件安装的数据以及每次过滤器更改时的数据。一切正常，但react-hooks/exhaustive-deps会发出警告，即 fetcher 函数应位于依赖项数组中。通过将 fetcher 添加到依赖项列表，应用程序进入无限循环。fetcher 在每次运行时都会收到一个新的 Axios 取消令牌，这会导致对 fetcher 的调用无限循环。在不禁用规则的情况下，我应该如何处理这种情况？

他 fetcher 函数在 之外useEffect，导致另一个回调函数（传递给孩子）可能会调用 fetcher。例如，可以编辑用户并在成功编辑时调用 fetcher 以重新加载新用户的模式

const [isLoading, setIsLoading] = React.useState<boolean>(false);
const [users, setUsers] = React.useState<IUser[]>([]);
const [filters, setFilters] = React.useState<ITableFilters>({...initFilters});

const fetcher = async (s: CancelTokenSource): Promise<void> => {
    setIsLoading(true);
    const params = { ...filters };
    try {
      const { data} = await fetchAllUsers({
        params,
        cancelToken: s.token
      });
      setUsers(data.users);
      setIsLoading(false);
    } catch (error) {
      handleResponseError(error);// wchich checks axios.isCancel
      setIsLoading(false);
    }
}

  React.useEffect(() => {
    const source = axios.CancelToken.source();
    // tslint:disable-next-line: no-floating-promises
    fetcher(source);
    return function cleanup() {
      source.cancel();
    };
  }, [filters]);

标签： reactjsaxiosreact-hooksuse-effect

解决方案

您可以使用useCallback，因此对 的引用fetcher应该保持不变，不会导致更多的重新渲染。

const fetcher = useCallback(async (s: CancelTokenSource) => {
  setIsLoading(true);
  const params = { ...filters };
  try {
    const { data} = await fetchAllUsers({
      params,
      cancelToken: s.token
    });
    setUsers(data.users);
    setIsLoading(false);
  } catch (error) {
    handleResponseError(error);// wchich checks axios.isCancel
    setIsLoading(false);
  }
}, [setIsLoading, setUsers, filters])

推荐阅读