React查询错误边界:如何根据用户是否第二次看到组件，为用户提供不同的选项

Question

我正在努力改进使用react-query的应用程序中的错误处理。

我有一个用于经过身份验证的用户路由器的<ErrorBoundary>组件：

<ErrorBoundaryRoot errorMessage="auth error">
<PracticeTypeContextProvider>
<IonReactRouter>
... myRoutesAndStuff

组件包装器如下所示：

import { ErrorBoundary } from 'react-error-boundary';
const ErrorBoundaryRoot: React.VFC<MyProps> = ({ children, errorMessage }: MyProps) => {
const { reset } = useQueryErrorResetBoundary();
return (
<ErrorBoundary
onReset={reset}
fallbackRender={({ resetErrorBoundary }) => (
<PageError errorMessage={errorMessage} resetErrorBoundary={resetErrorBoundary} />
)}
>
<Suspense fallback={<LoadingApp />}>
{ children }
</Suspense>
</ErrorBoundary>
);
};

这正确地捕捉到了错误，太棒了！

现在，我想向用户展示两个按钮中的一个：

• 如果这是第一次看到错误边界<ButtonInvalidateAuthQueries>，那么我可以尝试重置应用程序，而无需将用户注销
• 但是，如果失败，我想向用户显示一个不同的按钮<ButtonResetApp>，它可以重置所有查询并将用户注销

我这样设置<PageError>组件：

const PageError: React.VFC<MyProps> = ({ errorMessage, resetErrorBoundary }: MyProps) => {
const [alreadyTriedItOnce, setAlreadyTriedItOnce] = useState(false);
return (
<IonPage>
<IonContent>
<>
{ alreadyTriedItOnce ? (
<ButtonResetApp platform={platform} resetErrorBoundary={resetErrorBoundary} />
) : (
<ButtonInvalidateAuthQueries
setAlreadyTriedItOnce={setAlreadyTriedItOnce}
resetErrorBoundary={resetErrorBoundary}
/>
)}
</>
)}
</IonContent>
</IonPage>
);
};

无效按钮：

const ButtonInvalidateAuthQueries: React.VFC<MyProps> = (
{ setAlreadyTriedItOnce, resetErrorBoundary }: MyProps,
) => {
const queryClient = useQueryClient();
return (
<IonButton
onClick={() => {
queryClient.invalidateQueries(queryKeyInvalidateAllAuthQueries);
resetErrorBoundary();
setAlreadyTriedItOnce(true);
}}
>
Reset auth queries
</IonButton>
);
};

然而，这并不起作用，因为当用户单击<ButtonInvalidateAuthQueries>时，所有身份验证组件都会重新呈现，包括错误边界，因此如果再次显示错误边界，alreadyTriedItOnce状态将初始化为false。

所以我的问题是：是否有一些聪明的方法可以判断<ButtonInvalidateAuthQueries>是否失败，如果是，则显示<ButtonResetApp>？

作为一种变通方法，我可以显示这两个按钮，并向用户提供"；先点击这个，如果不起作用，点击另一个，"；但我觉得作为一名程序员，我的工作就是在任何时候给用户最好的选择。

Answer 1

我使用Context根据Bergi的注释修复了这个问题。

首先，我创建了一个简单的上下文来存储布尔值useState:

import React from 'react';
import useStateBoolean from '../utils/hooks/useStateBoolean';
const ErrorTriedAlreadyContext = React.createContext(false);
const ErrorTriedAlreadySetContext = React.createContext(
{} as React.Dispatch<React.SetStateAction<boolean>>,
);
interface MyProps {
children: JSX.Element,
}
export const ErrorTriedAlreadyContextProvider: React.VFC<MyProps> = ({ children }: MyProps) => {
const [triedAlready, setTriedAlready] = useStateBoolean();
return (
<ErrorTriedAlreadyContext.Provider value={triedAlready}>
<ErrorTriedAlreadySetContext.Provider value={setTriedAlready}>
{children}
</ErrorTriedAlreadySetContext.Provider>
</ErrorTriedAlreadyContext.Provider>
);
};
export const useErrorAlreadyTriedContext = (): [
boolean, React.Dispatch<React.SetStateAction<boolean>>,
] => {
const triedAlready = React.useContext(ErrorTriedAlreadyContext);
const setTriedAlready = React.useContext(ErrorTriedAlreadySetContext);
if (!setTriedAlready) {
throw new Error('The ErrorTriedAlreadyProvider is missing.');
}
return [triedAlready, setTriedAlready];
};

然后，我创建了一个新的ErrorBoundary:

const ErrorBoundaryAuth: React.VFC<MyProps> = ({ children }: MyProps) => {
const { reset } = useQueryErrorResetBoundary();
return (
<ErrorTriedAlreadyContextProvider>
<ErrorBoundary
onReset={reset}
fallbackRender={({ resetErrorBoundary }) => (
<PageError
errorMessage={t({ id: 'error.auth_router_query_error', message: 'Temporary app error' })}
allowAuthReset
resetErrorBoundary={resetErrorBoundary}
/>
)}
>
<Suspense fallback={<LoadingApp />}>
{ children }
</Suspense>
</ErrorBoundary>
</ErrorTriedAlreadyContextProvider>
);
};

我把它添加到我的路由器：

return (
<ErrorBoundaryAuth>
<PracticeTypeContextProvider>
<IonReactRouter>

还有我的按钮：

const ButtonInvalidateAuthQueries: React.VFC<MyProps> = (
{ resetErrorBoundary }: MyProps,
) => {
const queryClient = useQueryClient();
const [, setAlreadyTried] = useErrorAlreadyTriedContext();
return (
<>
<IonButton
onClick={() => {
queryClient.invalidateQueries(queryKeyInvalidateAllNonCookieQueries);
if (resetErrorBoundary) {
resetErrorBoundary();
}
// The context may not always be available.
if (setAlreadyTried) {
setAlreadyTried(true);
}
}}
>
<IonIcon icon={sync} slot="start" />
<Trans id="button.reset_queries">Try again</Trans>
</IonButton>
</>
);
};

现在它起作用了！