React JS授权表单isAuth状态不更新问题排查求助

1. 解决表单提交导致页面刷新的核心问题 #

你的按钮嵌套在<form>标签内，默认type为submit，点击后会触发表单提交行为，导致页面强制刷新——之前通过user.setIsAuth(true)和user.setUser(data)设置的状态会被重置为初始值（isAuth: false、user: {}），这是状态不生效的最直接原因。

修复：给按钮添加type="button"属性，阻止默认的表单提交：

<button type="button" onClick={() => click()} className='form__btn'>{isLogin ? 'Войти' : 'Регистрация'}</button>

2. 确认Context的Provider配置正确性 #

检查项目入口文件（如index.js）中Context的创建与Provider包裹是否正确，确保UserStore实例被全局注入：

// index.js 示例配置
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import { Context } from './index';
import UserStore from './UserStore';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <Context.Provider value={{ user: new UserStore() }}>
      <App />
    </Context.Provider>
  </BrowserRouter>
);

若未用Context.Provider正确包裹App组件，useContext(Context)会拿到null，调用user.setUser或user.setIsAuth会直接报错，但你提到alert能触发，说明当前Provider配置大概率正常，可跳过此步验证。

3. 验证数据与实例有效性（可选排查） #

在click函数中添加日志，确认user实例和接口返回数据的有效性：

const click = async() => {
    try {
        let data;
        if (isLogin) {
            data = await login(email, password);
        } else {
            data = await registration(email, password);
        }
        console.log('UserStore实例:', user); // 确认实例不为空
        console.log('接口返回用户数据:', data); // 确认解析后的JWT数据正常
        user.setUser(data);
        user.setIsAuth(true);
        console.log('更新后的isAuth:', user.isAuth); // 确认状态已更新
    } catch (e) {
        alert(e.response.data.message)
    }
}

如果日志显示状态已更新，但页面刷新后又重置，说明还是表单提交的问题未解决。

额外修正：userApi中的check函数错误 #

你的userApi.js里的check函数请求路径明显错误（指向了注册接口），后续做权限校验时会出问题，建议修正为正确的校验接口路径：

export const check = async () => {
    const response = await $authHost.get('api/user/check') // 改为正确的校验接口
    return jwt_decode(response.data.token)
}

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