防止React Suspense中Await的重新渲染

Question

我正在使用React中的Suspense，等待react-router等待promise并在解析时返回JSX，但在大多数情况下我想调用一些函数，例如导航或其他函数，然后这些函数被调用两次，我想防止这种情况发生

检查这个：

      export const Loader = async ({ params }) => {
                CheckAuth();
                let fetch_data = fetchApi('auth/activate-account', 'POST', { verify_token: params.verify_token });
                return defer({ loaderPromise: fetch_data });
            }
    //this loader is called in the Route loader prop
        
        const VerifyToken = () => {
        
            const loaderData = useLoaderData();
        
            const navigate = useNavigate();
        
            const { showAlert } = useGeneral();
        
            return (
                <React.Suspense fallback={<PreLoader />}>
                    <Await resolve={loaderData.loaderPromise}>
                        {(resolvedData) => {
                            if (resolvedData.type === "warning") {
                                showAlert(resolvedData.type, resolvedData.msg);
                                navigate('/Auth/Login', { replace: true });
                               return null;
                            }
                            return (
                                { JSX }
                            );
                        }}
                    </Await>
                </React.Suspense>
            );
    
    
    };

这会导致调用导航和 showAlert 函数两次，我想阻止这种情况或使用其他方法或其他方法。

我试过这个：

 let loaderRef = React.useRef(false);

     <React.Suspense fallback={<PreLoader />}>
            <Await resolve={loaderData.loaderPromise}>
                {(resolvedData) => {
                    if (!loaderRef.current) {
                        showAlert(resolvedData.type, resolvedData.msg);
                        loaderRef.current = true;
                        setTimeout(() => {
                            navigate('/Auth/Login', { replace: true });
                        }, 0);
                        return null;
                    }
                }}
            </Await>
        </React.Suspense>

这有效，但在大多数情况下效率不高。所以我希望我能在这里得到一些帮助

Answer 1

我没有完整的图片来帮助你，但我会尽力来客串 您在开发中是否在 StrictMode 中使用 React ？ 它将使 React 为每个组件重新渲染两次，以避免错误

如果不是这种情况，请提供测试应用程序的方法

https://react.dev/reference/react/StrictMode#strictmode

严格模式支持以下仅限开发的行为：

你的组件将重新渲染额外的时间来查找不纯渲染引起的错误。 您的组件将重新运行 Effects 一段额外的时间，以查找因缺少 Effect 清理而导致的错误。 将检查您的组件是否使用了已弃用的 API。