React项目中无需页面刷新获取localStorage数据的问题排查

问题根源 #

• Redux与localStorage数据结构不统一：Redux中users是用户对象数组，但注册时手动写入localStorage的是字符串数组，导致两者数据不一致。
• Redux仅在初始化时读取一次localStorage，后续状态更新未自动同步到localStorage；反之，手动修改localStorage也不会同步到Redux，造成页面跳转后无法获取最新状态。
• 组件内手动操作localStorage的时机与Redux状态更新不同步，加剧了状态不一致问题。

解决方案 #

1. 统一数据结构并自动同步Redux与localStorage

修改reducer，让每次状态更新后自动同步到localStorage，确保两者数据结构完全一致：

// reducer.jsx
import { legacy_createStore as createStore} from 'redux'

// 初始化状态：确保users是用户对象数组
const initialState = JSON.parse(localStorage.getItem("user")) || {
    users: []
}

const reducer = (state = initialState, action) => {
    let newState;
    switch(action.type){
        case "REGISTER":
            newState = {
                ...state,
                users: [...state.users, action.payload]
            }
            break;
        case "LOGIN":
            newState = {
                ...state,
                users: action.payload
            }
            break;
        case "LOGOUT":
            newState = {
                users: null
            }
            break;
        default:
            newState = state;
    }
    // 每次状态更新后自动同步到localStorage
    localStorage.setItem("user", JSON.stringify(newState))
    return newState;
}

const store = createStore(reducer)
export default store

2. 修复注册组件逻辑

移除组件内手动写入localStorage的代码，修正表单验证逻辑与组件名称拼写：

// register.jsx（修正名称为Register）
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { Link, useNavigate } from 'react-router-dom';

const Register = () => {
    const [username, setUsername] = useState('')
    const [email, setEmail] = useState('')
    const [location, setLocation] = useState('')
    const [password, setPassword] = useState("")
    const [confirmPassword, setConfirmPassword] = useState("")
    const dispatch = useDispatch();
    const navigate = useNavigate()

    const register = (e) => {
        // 修复邮箱验证逻辑：空邮箱或不含@都提示
        if(username === ""){
            alert("请输入用户名")
        } else if(email === "" || !email.includes("@")){
            alert("邮箱格式无效")
        } else if(location === ""){
            alert("请输入所在地")
        } else if(password.length < 5){
            alert("密码长度至少为5位")
        } else if(password !== confirmPassword){
            alert("两次输入的密码不一致")
            return;
        } else {
            dispatch({
                type: "REGISTER",
                payload: {
                    id: (new Date()).getTime(),
                    username,
                    email,
                    password,
                    location
                }
            });
            alert("注册成功")
            navigate("/login", { replace: true });
        }
    }

    return (
        <form className=''>
            <div className="bg-grey-lighter min-h-screen flex flex-col drop-shadow-lg">
                <div className="container max-w-sm mx-auto flex-1 flex flex-col items-center justify-center px-2">
                    <div className="bg-white px-6 py-8 rounded shadow-md text-black w-full">
                        <h1 className="mb-8 text-3xl text-center">注册</h1>
                        <input 
                            type="text"
                            className="block border border-grey-light w-full p-3 rounded mb-4"
                            autoComplete='username'
                            name='username'
                            placeholder="用户名"
                            onChange={(e)=>setUsername(e.target.value)} />

                        <input 
                            type="text"
                            className="block border border-grey-light w-full p-3 rounded mb-4"
                            autoComplete='current-email'
                            name='email'
                            placeholder="邮箱" 
                            onChange={(e)=>setEmail(e.target.value)}/>

                        <input 
                            type="password"
                            className="block border border-grey-light w-full p-3 rounded mb-4"
                            autoComplete='new-password'
                            name='password'
                            placeholder="密码"
                            onChange={(e)=>setPassword(e.target.value)}/>
                        <input 
                            type="password"
                            className="block border border-grey-light w-full p-3 rounded mb-4"
                            placeholder="确认密码"
                            name='confirm_pass'
                            onChange={(e)=>setConfirmPassword(e.target.value)}/>
                        {password !== confirmPassword && <small key={email+password} className="text-red-700">密码不匹配</small>}

                        <input 
                            type="text"
                            className="block border border-grey-light w-full p-3 rounded mb-4"
                            placeholder="所在地"
                            name='location'
                            onChange={(e)=>setLocation(e.target.value)}/>

                        <input
                            type="button"
                            className="w-full text-center py-3 rounded bg-green-600 text-white hover:bg-green-dark focus:outline-none my-1"
                            value="提交"
                            onClick={register}
                        />
                    </div>

                    <div className="text-grey-dark mt-6">
                        已有账号？ 
                        <Link className="no-underline border-b border-blue text-blue-800 px-2" to="/login">
                            登录
                        </Link>.
                    </div>
                </div>
            </div>
        </form>
    )
}

export default Register

3. 后续注意事项

• 登录页、首页等依赖用户状态的组件，需通过Redux的useSelector获取状态，而非直接读取localStorage，确保状态更新时组件自动重新渲染。
• 登录、登出逻辑需遵循同样规则：通过dispatch更新Redux状态，由reducer自动同步到localStorage，禁止手动操作localStorage。

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