如何在React组件加载前将localStorage数据更新到Context状态实现路由控制

你当前将localStorage读取逻辑放在了useEffect中，而useEffect的执行时机是组件挂载到DOM之后，因此App组件第一次渲染时，Context中的user始终是初始值null，直到挂载完成后才会更新为localStorage中的值，会出现路由判断错误、跳转闪屏的问题。

localStorage是浏览器提供的同步API，直接在Context状态初始化时读取数据即可，无需等待副作用执行。

修改后的userContext.js代码 #

import React, { useState, createContext } from "react";

export const userContext = createContext();

export const UserProvider = (props) => {
    // 初始化时直接读取localStorage，同步完成状态赋值
    const [user, setUser] = useState(loadFromLocalStorage());

    function loadFromLocalStorage() {
        try {
            const serializedState = localStorage.getItem("state");
            if (serializedState == null) return null;
            return JSON.parse(serializedState);
        } catch (err) {
            console.log(err);
            return null;
        }
    };

    return (
        <userContext.Provider value={[user, setUser]}>
            {props.children}
        </userContext.Provider>
    );
};

export default userContext;

• 确保项目入口文件（一般是index.js）中已经用UserProvider包裹了App组件，否则App无法读取Context状态，示例如下：

import { UserProvider } from './context/userContext';
import App from './App';

ReactDOM.render(
  <UserProvider>
    <App />
  </UserProvider>,
  document.getElementById('root')
);

• 你当前的App.js中缺失SignUp、NewsList组件的导入语句，运行前需要补全对应导入逻辑。
• 如果需要支持跨标签页同步登录状态，可以在UserProvider中新增storage事件监听，触发时重新读取localStorage更新user状态即可。

修改完成后，App组件加载时拿到的user已经是localStorage同步后的状态，路由判断会直接生效，不会出现延迟更新的问题。

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