使用 Firestore 反应 useAuth 和路由

Question

我在 firestore 使用控制台中注意到，该应用程序在第一次加载时消耗的读取次数比我预期的要多（我预期为 1，但它消耗了 9），某些内容的渲染次数比预期要多。每当我访问 firestore 时，我都尝试使用 console.logs 但似乎没有带来任何帮助。

我是 React 新手，显然我做错了什么，我读过很多帖子和文档，但我很难理解我做错了什么。

欢迎任何建议

index.js：

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <StrictMode>
    <BrowserRouter>        
      <AuthProvider>
        <App />        
      </AuthProvider>
    </BrowserRouter>
  </StrictMode>
)

userContext.js：

const AuthContext = createContext()
    
    async function logIn(email, password) { 
      await signInWithEmailAndPassword(auth, email, password)
    }
    
    async function logOut() {
      await signOut(auth)  
    }
    
    async function register(email, password) {
      return createUserWithEmailAndPassword(auth, email, password)
    }
    
    export function AuthProvider({ children }) {    
      const [userData, setUserData] = useState(null)
        
      useEffect(() => {
        const unsubscribe = onAuthStateChanged(auth, async (authUser) => {
          if (authUser) {
            try {             
              const docRef = doc(db, 'USERS', authUser.uid)
              const docSnap = await getDoc(docRef)
              const data = docSnap.data()    
              setUserData(data)          
            } catch (error) {
              console.error(error)
            }
          } else {
            setUserData(null)
          }
        })
    
        return () => unsubscribe()
      }, [])
    
      const authContextValue = {    
        userData,        
        logIn,
        logOut,
        register,
      }
    
      return (
        <AuthContext.Provider value={authContextValue}>
          {children}
        </AuthContext.Provider>
      )
    }



    export function useAuth() {
      const context = useContext(AuthContext)
    
      if (!context) {
        throw new Error('No context provider')
      }
    
      return context
    }

App.js

export default function App() {   
  const { userData } = useAuth()

  return (
    <>    
      {userData ? (
      <Routes>
        <Route path="/" 
          element={
            <>
              <AppNavbar /> 
              <Outlet />
            </>
          }>
          
          <Route path="page1" element={<Page1/>} />
          <Route path="page2" element={<Page2/>} />
        </Route>
      </Routes>
      
      ) : (      
        <Routes>
          <Route path="login" element={<Login />} />
          <Route path="register" element={<Register />} />          
        </Routes>
      
      )}

  </>
  )
}

Answer 1

删除根渲染中的

<StrictMode />

。

注意： 删除严格模式是隔离问题的调试步骤，而不是推荐的解决方案。严格模式会突出潜在的问题，但本质上不会导致过度渲染。相反，应专注于优化代码、检查 useEffect 中的依赖关系以及使用控制台日志进行调试，以解决意外渲染的根本原因。

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
 // <StrictMode> : Remove React Strict Mode
  <BrowserRouter>        
    <AuthProvider>
      <App />        
    </AuthProvider>
  </BrowserRouter>
 // </StrictMode>
)