React Query错误边界：如何根据错误展示次数为用户提供不同操作选项

问题根源 #

你的alreadyTriedItOnce状态存储在PageError组件内部，每次错误边界重置后，PageError会被卸载，下次错误边界触发重新渲染PageError时，内部状态会被初始化为false，导致按钮切换逻辑失效。

解决方案 #

将重试标记存储在不会被错误边界重置销毁的上下文里，这里推荐直接用react-query的queryClient全局存储临时状态，无需额外引入状态管理库，实现逻辑如下：

1. 修改ButtonInvalidateAuthQueries点击逻辑

先保存重试标记，再重置错误边界，同时等待查询失效操作执行完成，避免时序问题：

const ButtonInvalidateAuthQueries: React.VFC<MyProps> = (
  { resetErrorBoundary }: MyProps,
) => {
  const queryClient = useQueryClient();
  return (
    <IonButton
      onClick={async () => {
        // 等待认证相关查询失效完成
        await queryClient.invalidateQueries(queryKeyInvalidateAllAuthQueries);
        // 存储重试标记到queryClient全局状态
        queryClient.setQueryData(['auth-retry-attempted'], true);
        resetErrorBoundary();
      }}
    >
      Reset auth queries
    </IonButton>
  );
};

2. 修改PageError组件的状态初始化逻辑

从queryClient读取重试标记作为初始值，点击重置应用按钮时清除标记：

const PageError: React.VFC<MyProps> = ({ errorMessage, resetErrorBoundary }: MyProps) => {
  const queryClient = useQueryClient();
  // 从全局状态读取重试标记，默认值为false
  const [alreadyTriedItOnce, setAlreadyTriedItOnce] = useState(
    () => queryClient.getQueryData(['auth-retry-attempted']) ?? false
  );

  const handleResetApp = () => {
    // 重置时清除重试标记，下次报错恢复显示第一个按钮
    queryClient.removeQueries(['auth-retry-attempted']);
    // 原有登出、重置查询逻辑
  };

  return (
    <IonPage>
      <IonContent>
        { alreadyTriedItOnce ? (
          <ButtonResetApp 
            platform={platform} 
            resetErrorBoundary={resetErrorBoundary}
            onReset={handleResetApp}
          />
        ) : (
          <ButtonInvalidateAuthQueries
            resetErrorBoundary={resetErrorBoundary}
          />
        )}
      </IonContent>
    </IonPage>
  );
};

替代方案 #

如果不想占用queryClient的存储位，也可以用sessionStorage存储重试标记，读写逻辑和上面一致，用户关闭页面后标记会自动清除，不会有残留问题。

内容的提问来源于stack exchange，提问作者Patrick Kenny