依赖于API响应的设置状态导致-重新提交程序错误过多

Question

在下面的代码中，我试图将stop的状态设置为true，以便在特定API通过useQuery响应时，基于特定代码，我可以开始轮询API。默认情况下，轮询保持为false。

我的问题是，如何在这里设置状态，而不响应抛出Too many re-renders error

问题文件

import React, { useState } from 'react';
import { Navigate, useLocation } from 'react-router-dom';
import { useBffQueryApi } from '../hooks/useQueryBffApi';
import {
appStatus,
IStatusAPIResponse,
IHeaderInformation,
} from '../api/appStatus';
import { useAppSelector } from '../app/hooks';
import { RootState } from '../app/store';
// import { MobileNumber } from './features/ContactNumber/MobileNumber';
export function web() {
const location = useLocation();
const authzToken = useAppSelector(
(state: RootState) => state.authz.AuthzInfo,
);
const [stop, setStop] = useState(true);
const {
data: response,
error,
isLoading,
} = useBffQueryApi<IStatusAPIResponse, IHeaderInformation>(
'status',
() => appStatus({ auth: authzToken }),
true,
stop,
);
const redirecter = (status: number) => {
//Here lies the problem
if (status === 306) {
setStop(false);
// Do something
}
//Here lies the problem
if (status === 41) {
return <Navigate to="/web/email-confirmation" />;
}
if (status === 42) {
return <Navigate to="/web/personal-details" />;
}
if (status === 44) {
return <Navigate to="/web/address-details" />;
}
if (status === 50) {
return <Navigate to="/web/offer-details" />;
}
if (status === 48) {
return <Navigate to="/web/denied" />;
}
if (status === 51 || status === 52 || status === 53) {
return <Navigate to="/web/offer-details" />;
}
if (status === 46) {
return (
<Navigate
to="/web/third-party"
state={{ location: location.pathname }}
/>
);
}
if (status === 47) {
return <Navigate to="/web/third-party" />;
}
return null;
};
if (isLoading) {
return (
<div>
<h1>Loading</h1>
</div>
);
}
if (error?.response?.status === 401) {
return <Navigate to="/web/phone" />;
}
const { status } = response!.data;
return redirecter(status);
}

自定义挂钩

import { AxiosError, AxiosResponse } from 'axios';
export const useBffQueryApi = <J, K>(
cacheIdentity: string | Array<string | K>,
fn: QueryFunction<AxiosResponse<J>>,
enabled: boolean = true,
stop: boolean = true,
) => {
return useQuery<AxiosResponse<J>, AxiosError>(cacheIdentity, fn, {
retry: 0,
cacheTime: 0,
enabled,
refetchInterval: stop ? false : 5000,
});
};

Answer 1

在渲染过程中不能调用setState，这违反了react的规则。你在这里这样做：

if (status === 306) {
setStop(false);
// Do something
}

副作用需要转到useEffect，或者，您可以使用useQuery提供的onSuccess或onError回调。

对于您的情况，您不一定需要本地状态，因为refetchInterval也可以是一个函数：

useQuery(
key,
fn,
{
refetchInterval: (data) => !data || data.status === 306 ? false : 5000
}
)