由useaios取消令牌引起的useEffect挂钩无限循环[react-hooks / exhaustive-deps]

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

提取器函数不在useEffect之外,导致另一个回调函数(传递给子代)可能调用提取器。例如可以编辑用户的模式,并在成功编辑后调用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]);
dwzjr 回答:由useaios取消令牌引起的useEffect挂钩无限循环[react-hooks / exhaustive-deps]

您可以使用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])
本文链接:https://www.f2er.com/3150617.html

大家都在问