在反應中渲染之前檢查條件是否滿足

Question

我正在關注如何在 React 中集成 Stripe 支付的教程。 我遇到的問題是此頁面，它將檢查用戶是否已登錄，如果他們已登錄，它將顯示一個 cookie，如果沒有，它將顯示升級到高級按鈕。 一切正常，但是有一個煩人的行為，如果我刷新頁面，它會在檢查用戶是否為高級之前短暫顯示“升級到高級”按鈕，然后快速更改為 cookie。 我希望它在渲染內容之前進行理想的檢查，這樣它會更平滑一些，而且看起來不會緊張。

import React, { useEffect,useState } from 'react'
import firebase from "../src/firebase";
import { useAuthState } from "react-firebase-hooks/auth";
import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut,onAuthStateChanged   } from "firebase/auth";
import createCheckoutSession  from "./stripe/createCheckoutSession";
import usePremiumStatus from "./stripe/usePremiumStatus";
import Login from "./Login";
import { Link, useNavigate } from 'react-router-dom'
import { Spinner } from 'react-bootstrap';


export default function Practise() {
  const auth = getAuth();
  const {currentUser}=getAuth()
  const userIsPremium = usePremiumStatus(currentUser);
  const [load,setLoading]=useState(false)

  const debugging = async ()=>{
    const {currentUser}= await getAuth().then(()=>{
        console.log(currentUser)
    })
    
  }


  const [loggedIn,setLoggedIn]= useState(false)
  let navigate = useNavigate();
  const handleNewInfo = ()=>{
    onAuthStateChanged(auth, (user) => {
    if (user) {
      
      const uid = user.uid;
      setLoggedIn(true)
      const prom = async ()=>{
        await ((user.getIdTokenResult()))
      }
      prom()
      console.log(userIsPremium)
      
    } else {
      navigate('/login')
      console.log('not logged in!')
    }

  })}
  const getUser = ()=>{
    console.log(currentUser)
  }

  useEffect(
  handleNewInfo
  ,[]
  )     ;
  const handleClick = (userid)=>{
    setLoading(true)
    createCheckoutSession(userid)
  }
  return (
    <div>
      {!loggedIn  && <h1>Loading...</h1>}
      {loggedIn   && (
        <div>
          <h1>Hello, {currentUser.displayName}</h1>
          {!userIsPremium  && (
            <button onClick={() => handleClick(currentUser.uid)}>
              Upgrade to premium!
            </button>
          ) }

          {!userIsPremium && load  && (
                      <Spinner animation="border" role="status">
                      <span className="visually-hidden">Loading...</span>
                    </Spinner>
                    ) }
            
            {userIsPremium &&  <h2>Have a cookie 🍪 Premium customer!</h2>
                    }
    
        </div>
      )}
    </div>
  );
}

Answer 1

如果仍在加載，請嘗試顯示加載消息，並僅在已加載有關用戶狀態的信息的信息時執行高級檢查：

return (
    <div>
      {!loggedIn && <h1>Loading...</h1>}
      {loggedIn && (
        <div>
          <h1>Hello, {currentUser.displayName}</h1>

          {load ? (
            <Spinner animation='border' role='status'>
              <span className='visually-hidden'>Loading...</span>
            </Spinner>
          ) : userIsPremium ? (
            <h2>Have a cookie 🍪 Premium customer!</h2>
          ) : (
            <button onClick={() => handleClick(currentUser.uid)}>
              Upgrade to premium!
            </button>
          )}
        </div>
      )}
    </div>
  );