React中useContext状态无法更新问题求助

我正在学习React的useContext API，搭建了一个基础项目，但遇到状态无法更新的问题。当输入用户名和密码并提交表单时，login函数内的console.log可以获取到输入的值，但user状态始终保持初始的空值状态。相关代码如下：

index.js #

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { AuthProvider } from './Contexts/AuthProvider';

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

App.js #

import { Routes, Route, Link } from 'react-router-dom';
import Navigation from './Pages/Navigation';
import Home from './Pages/Home';
import Login from './Pages/Login';
import Profile from './Pages/Profile';
import Dashboard from './Pages/Dashboard';
import NoMatch from './Pages/NoMatch';
import ProtectedRoute from './Pages/ProtectedRoute';

function App() {

  return (
    <div>
      <Navigation />

      <Routes>
        <Route index element={<Home />} />
        <Route path='login' element={<Login />} />
        <Route path="home" element={<Home />} />
        <Route path="Profile" element={<ProtectedRoute><Profile /></ProtectedRoute>} />
        <Route path="Dashboard" element={<Dashboard />} />
        <Route path="*" element={<NoMatch />} />
      </Routes>
    </div >
  );
}

export default App;

AuthProvider.js #

import { createContext, useState } from "react";

const AuthContext = createContext({});

export const AuthProvider = ({ children }) => {

    const [user, setUser] = useState({ username: '', password: '', isAuthenticated: false });

    const login = (_username, _password) => {
        console.log('inside ' + _username);
        console.log('inside ' + _password);
        setUser({ username: _username, password: _password, isAuthenticated: true });
        console.log(user);
    }

    const logout = () => {
        setUser({ username: '', password: '', isAuthenticated: false });
    }

    return (
        <AuthContext.Provider value={[user, login, logout, setUser]}>
            {children}
        </AuthContext.Provider>
    );

};

export default AuthContext;

Login.js #

import { useState, useContext } from "react";
import { Link } from "react-router-dom";
import AuthContext from '../Contexts/AuthProvider';

const Login = () => {

    const [user, login, logout, setUser] = useContext(AuthContext)

    const [username, usernameupdate] = useState('');
    const [password, passwordupdate] = useState('');

    const handlesubmit = (e) => {
        e.preventDefault();
        console.log(username);
        console.log(password);
        login(username, password);
        console.log(user);
    }

    return (
        <div>
            <form className="container" onSubmit={handlesubmit}>
                <div className="card">
                    <div className="card-header">
                        <h2>User Login</h2>
                    </div>
                    <div className="card-body">
                        <div className="form-group">
                            <label>User Name <span className="errmsg">*</span></label>
                            <input value={username} onChange={e => usernameupdate(e.target.value)} className="form-control"></input>
                        </div>
                        <div className="form-group">
                            <label>Password <span className="errmsg">*</span></label>
                            <input type="password" value={password} onChange={e => passwordupdate(e.target.value)} className="form-control"></input>
                        </div>
                    </div>
                    <div className="card-footer">
                        <button type="submit" className="btn btn-primary">Login</button>
                        <Link className="btn btn-success" to={'/register'}>New User</Link>
                    </div>
                </div>
            </form>
        </div>
    )
}

export default Login;

问题原因与解决方案 #

1. 状态更新是异步操作，即时console.log拿不到新值 #

你在login函数和handlesubmit中调用setUser后立刻打印user，此时拿到的还是更新前的旧值——React的状态更新是异步批量处理的，不会同步修改状态变量，所以即时打印无法看到最新状态。

验证状态是否真的更新：在Login组件中添加useEffect监听user的变化，就能看到真实的状态更新结果：

import { useState, useContext, useEffect } from "react";

// ... 其他代码

const Login = () => {
    const [user, login, logout, setUser] = useContext(AuthContext)

    useEffect(() => {
        console.log('用户状态已更新:', user);
    }, [user]);

    // ... 其他代码
}

2. Context值用数组传递易引发不必要重渲染（优化建议） #

当前你用数组[user, login, logout, setUser]传递Context值，每次AuthProvider渲染时，数组会被重新创建（新引用），导致所有消费该Context的组件强制重渲染。

优化方案：改用对象传递Context值，并用useCallback和useMemo缓存函数和Context值，避免无意义重渲染：

修改AuthProvider.js：

import { createContext, useState, useCallback, useMemo } from "react";

const AuthContext = createContext({});

export const AuthProvider = ({ children }) => {
    const [user, setUser] = useState({ username: '', password: '', isAuthenticated: false });

    const login = useCallback((_username, _password) => {
        setUser({ username: _username, password: _password, isAuthenticated: true });
    }, []);

    const logout = useCallback(() => {
        setUser({ username: '', password: '', isAuthenticated: false });
    }, []);

    const contextValue = useMemo(() => ({
        user,
        login,
        logout,
        setUser
    }), [user, login, logout]);

    return (
        <AuthContext.Provider value={contextValue}>
            {children}
        </AuthContext.Provider>
    );
};

export default AuthContext;

同时修改Login.js中的Context解构方式：

const { user, login, logout, setUser } = useContext(AuthContext)

3. 总结 #

你的代码中状态其实已经正常更新了，只是异步特性导致即时打印看不到新值。按照上述方法验证状态，并优化Context的传递方式，就能解决你的困惑并提升组件性能。

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