Reactjs 将本地存储分配到react状态。反应钩

我正在尝试登录用户，并使用用户数据更新我的全局上下文。为了让用户登录，我将他们的数据存储在本地存储器中

我使用react钩子来处理状态，因此我定义了一个状态：

let[userData，setUserData]=useState（{}）

因为我不想让用户登录，所以在登录期间，我将他们的数据存储在本地存储器中。这是可行的，数据实际上存储在本地存储器中

但是，我的问题是，我无法将初始
userData
状态设置为与本地存储中的当前数据相等。换句话说，
userData
状态在重新加载时重置为默认值

我认为从本地存储中获取初始数据并将其分配到
useffect
钩子中的状态是可行的。但是在
useffect
内部调用
setUserData
时，状态不会更新

AuthContext.js：

import React, { createContext, useState, useEffect } from 'react';

export const AuthContext = createContext();

const AuthContextProvider = props => {
    let [userData, setUserData] = useState({});

    const loginUser = (data) => {
        localStorage.setItem('userData', JSON.stringify({
            key: data.key,
            id: data.id,
            email: data.email,
            first_name: data.first_name,
            last_name: data.last_name
        })); // Save the user object in local storage
        setUserData({
            key: data.key,
            id: data.id,
            email: data.email,
            first_name: data.first_name,
            last_name: data.last_name
        }); // Set user data    
    };

    const logoutUser = () => {
        localStorage.removeItem('userData');
        setUserData({}); // Empty user data state
        newToast('Successfully signed out');
    };

    useEffect(() => {
        const localUser = JSON.parse(localStorage.getItem('userData'));
        if (localUser && localUser.key) {
            setUserData({
                key: localUser.key,
                id: localUser.id,
                email: localUser.email,
                first_name: localUser.first_name,
                last_name: localUser.last_name
            }); // Set user data    
        }
    }, [])


    return (
        <AuthContext.Provider value={{ userData, loginUser, logoutUser, newToast }}>
            {props.children}
        </AuthContext.Provider>
    )
}

export default AuthContextProvider;

所以我想出了一个解决办法

在AuthContext.js中，我不需要在
useffect
中分配状态。
相反，我在定义状态挂钩时直接获取初始数据：

const localUser = JSON.parse(localStorage.getItem('userData')) || {};
let [userData, setUserData] = useState(localUser);

这样，我根本不需要
useffect
钩子

我希望这是推荐的方法。
如果我理解你的问题，你可以做以下操作：

const [user, setUser] = useState([], () => {
        const localData = localStorage.getItem('userData');
        return localData ? JSON.parse(localData) : [];
    });

像这样使用useReducer怎么样

const [user, setUser] = useReducer((prev, cur) => {
  localStorage.setItem('userData', JSON.stringify(cur));
  return cur;
}, JSON.parse(localStorage.getItem('userData')));

你可以打电话

setUser({ key: '1', ... });

setUser({ key: '1', ... });