React组件props传递问题：登录成功后isLoggedIn状态不更新

问题核心 #

你在LoginPage里重新定义了局部的isLoggedIn和setIsLogged状态，完全忽略了App组件传递过来的setIsLogged方法。登录成功时你更新的是组件内部的局部状态，根本没触动App里的全局状态，Navbar接收的isLoggedIn自然一直是初始的false。

修复步骤 #

1. 删掉LoginPage里自己声明的const [isLoggedIn, setIsLogged] = useState(false)
2. 从组件props中接收App传递过来的setIsLogged方法
3. 登录成功时调用这个props里的setIsLogged(true)，更新全局状态

修正后的LoginPage代码 #

import axios from 'axios'
import React, { useState } from 'react'
import { NavLink, useNavigate } from 'react-router-dom'

export default function LoginPage({ setIsLogged }) { // 从props接收全局的setIsLogged
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")
  const [warning, setWarning] = useState(false) // 补上catch中用到的warning状态

  const navigate = useNavigate();

  function checkInformations(){
    axios.post("/api/auth/login", {
      username: username,
      password: password
    })
    .then(response => {
      if(response.status === 200){
        setIsLogged(true) // 更新App中的全局登录状态
        console.log("Success")
        navigate("/")
      }
    })
    .catch(error => {
      console.error("Request error: ", error)
      setWarning(true)
    });
  }

  function handleLoginClick(e){
    e.preventDefault();
    checkInformations()
  }

  return (
    <div className="grid min-h-screen place-items-center font-body">
      {/* 你的表单内容 */}
      <button onClick={handleLoginClick} type="submit">
        Login
      </button>
      {/* 其他页面内容 */}
    </div>
  )
}

额外优化建议 #

为了避免页面刷新后登录状态丢失，可以把状态同步到localStorage中：

// App.js
import { useState, useEffect } from 'react'

export default function App() {
  // 初始化时读取localStorage的状态，没有则设为false
  const [isLoggedIn, setIsLogged] = useState(() => {
    return localStorage.getItem('isLoggedIn') === 'true'
  });

  // 登录状态变化时同步到localStorage
  useEffect(() => {
    localStorage.setItem('isLoggedIn', isLoggedIn.toString())
  }, [isLoggedIn])

  return (
    <div >
      <Navbar isLoggedIn={isLoggedIn} />
      <Routes>
        <Route path="/login" element={<LoginPage setIsLogged={setIsLogged} />} />
      </Routes>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Kadir Özer Öztürk