如何在useEffect中渲染页面/组件 触发后组件未渲染如何解决

核心错误原因 #

• 你误用了useEffect的返回值：React 中useEffect的返回值是清理函数，仅会在依赖项更新前、组件卸载时执行，不会作为组件的渲染内容输出，因此你在useEffect中返回的<MainPage />永远不会被渲染到页面上。
• 组件的渲染内容仅由根作用域下的return语句决定，你当前的根返回逻辑中没有根据isLoggedIn状态判断是否渲染MainPage的逻辑。

修正方案 #

直接在组件的根返回位置做条件渲染即可，无需通过useEffect触发渲染，React会自动监听状态变更并刷新视图。同时建议调整状态更新写法避免闭包陷阱，完整调整后的代码如下：

import { useState, useEffect } from 'react';
import axios from 'axios';
// 其他必要导入

const LoginComponent = () => {
  const iLoginCreds ={
    userName:'',
    password:'',
    isLoggedIn:false
  }
  const [loginCreds, setLoginCredentials] = useState(iLoginCreds)

  function checkIfSignedIn() {
    axios.get(`https://localhost:44301/api/login/ValidateLogin`)
         .then(res=>{ 
           console.log(JSON.stringify(res.data));
           // 改为函数式更新，避免闭包捕获旧状态导致的更新异常
           setLoginCredentials(prev => ({
            ...prev,
            isLoggedIn: res.data
          }));
          dispatch(StoreUserAuthenticationStatusAction(res.data));
         });
  }

  // useEffect仅用来处理副作用（比如弹窗、路由跳转等），不要返回JSX
  useEffect(() => {
    alert(loginCreds.isLoggedIn);
    // 如果你需要跳转到独立的MainPage路由，可在此处加跳转逻辑：
    // if(loginCreds.isLoggedIn) navigate('/main')
  }, [loginCreds.isLoggedIn])

  // 核心修改：根渲染逻辑增加条件判断
  return (
    <>
      {
        loginCreds.isLoggedIn
        ? <MainPage />
        : <>
            {/* 原有登录页的其他内容 */}
            <FormGroup>
              <Button 
                style={{width:'100%',backgroundColor:"#FCB724",color:"black",fontWeight:"bold"}} 
                onClick={checkIfSignedIn}  
              >
                Sign in using our secure server
              </Button>
            </FormGroup>
          </>
      }
    </>
  )
}

补充说明 #

如果你的MainPage是独立路由页面，不需要在当前登录组件内渲染，也可以在useEffect中判断登录状态为true时调用路由跳转方法（比如react-router的navigate）实现页面切换，同样不需要在useEffect中返回JSX。

内容的提问来源于stack exchange，提问作者C Sharper