ReactJS中如何在Context中设置值？解决页面刷新state值丢失问题

问题核心是useState的状态仅存在于组件内存中，页面刷新会触发组件重新挂载，state会回到初始的未定义状态。要解决这个问题，需要把schoolid持久化存储，比如用localStorage，同时结合Firebase的auth状态监听逻辑完善代码：

修改后的完整代码 #

const [schoolid, setSchoolid] = useState(localStorage.getItem('schoolid'));
const [user, setUser] = useState();

const mProps = {
    user,
    login,
    schoolid
};

async function login(email, password) {
    return signInWithEmailAndPassword(auth, email, password)
}

useEffect(() => {
    const unsubscribe = onAuthStateChanged(auth, async (currentuser) => {
        setUser(currentuser);
        if (currentuser) {
            // 用户已登录，获取schoolid
            const docRef = doc(db, "userTbl", currentuser.uid);
            const docSnap = await getDoc(docRef);
            if (docSnap.exists()) {
                const fetchedSchoolId = docSnap.data().schoolid;
                setSchoolid(fetchedSchoolId);
                // 同步存储到localStorage
                localStorage.setItem('schoolid', fetchedSchoolId);
            }
        } else {
            // 用户注销，清空状态和存储
            setSchoolid(null);
            localStorage.removeItem('schoolid');
        }
    });

    return unsubscribe;
}, []);

关键修改点说明 #

• 初始值从localStorage读取：组件挂载时优先从localStorage获取之前存储的schoolid，刷新后能直接恢复状态。
• 更新状态同步存储：获取到schoolid后，除了更新useState，同时把值存入localStorage，确保持久化。
• 处理用户注销场景：当auth状态变为null（用户登出）时，清空state并删除localStorage中的schoolid，避免数据残留。

额外注意事项 #

• 如果schoolid是数字类型，从localStorage读取时需要用parseInt转换，因为localStorage存储的是字符串。
• 若需要更高安全性（比如敏感数据），可以改用sessionStorage，它会在浏览器关闭后自动清除数据。

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