React中实现localStorage多用户存储及登录功能问题求助

核心问题梳理 #

• 当前代码中submit函数将用户数据以{values}的嵌套结构存入数组，导致数据格式冗余
• handleSubmit逻辑无效：刚存入localStorage的user必然与values一致，校验没有实际意义，且未处理邮箱重复注册的情况
• 表单同时绑定onSubmit和按钮onClick，会触发重复提交事件

修改方案 #

1. 修正用户存储结构：直接将values对象推入用户数组，避免不必要的嵌套
2. 完善注册校验逻辑：注册前检查邮箱是否已存在，防止重复注册
3. 统一表单提交逻辑：移除按钮的onClick，仅通过表单onSubmit处理提交流程
4. 优化流程跳转：注册成功后跳转到登录页面，符合正常注册流程

修改后的注册页面代码 #

const Signup = () => {
    const [values, setValue] = useState({ email: "", password: "" });
    const navigate = useNavigate();

    const onChangeInput = (name, e) => {
        setValue(pvalue => ({
            ...pvalue,
            [name]: e.target.value,
        }));
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        
        // 读取本地存储的用户列表，无数据则初始化为空数组
        let users = JSON.parse(localStorage.getItem("users") || "[]");
        
        // 校验邮箱是否已注册
        const isEmailRegistered = users.some(user => user.email === values.email);
        if (isEmailRegistered) {
            alert("该邮箱已被注册！");
            return;
        }
        
        // 添加新用户并更新本地存储
        users.push(values);
        localStorage.setItem('users', JSON.stringify(users));
        
        alert("注册成功！");
        navigate("/login"); // 跳转到登录页
    };

    return (
        <div className="text-center m-5-auto">
            <form onSubmit={handleSubmit}>
                <p>
                    <label>Email address:</label><br />
                    <input
                        name="email"
                        type="email"
                        value={values.email}
                        onChange={(e) => onChangeInput('email', e)}
                        required
                    />
                </p>
                <p>
                    <label>Password:</label><br />
                    <input
                        name="password"
                        type="password"
                        value={values.password}
                        onChange={(e) => onChangeInput('password', e)}
                        required
                    />
                </p>
                <p>
                    <button id="btn" type="submit">Register</button>
                </p>
            </form>
        </div>
    );
}

export default Signup;

登录页面读取用户信息示例 #

登录时可读取users数组，匹配输入的邮箱和密码：

const Login = () => {
    const [values, setValue] = useState({ email: "", password: "" });
    const navigate = useNavigate();

    const onChangeInput = (name, e) => {
        setValue(pvalue => ({
            ...pvalue,
            [name]: e.target.value,
        }));
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        
        const users = JSON.parse(localStorage.getItem("users") || "[]");
        // 查找匹配的用户
        const matchedUser = users.find(user => 
            user.email === values.email && user.password === values.password
        );
        
        if (matchedUser) {
            alert("登录成功！");
            // 存储当前登录用户，供后续页面使用
            localStorage.setItem('currentUser', JSON.stringify(matchedUser));
            navigate("/dashboard"); // 跳转到主页
        } else {
            alert("邮箱或密码错误！");
        }
    };

    return (
        <div className="text-center m-5-auto">
            <form onSubmit={handleSubmit}>
                <p>
                    <label>Email address:</label><br />
                    <input
                        name="email"
                        type="email"
                        value={values.email}
                        onChange={(e) => onChangeInput('email', e)}
                        required
                    />
                </p>
                <p>
                    <label>Password:</label><br />
                    <input
                        name="password"
                        type="password"
                        value={values.password}
                        onChange={(e) => onChangeInput('password', e)}
                        required
                    />
                </p>
                <p>
                    <button id="btn" type="submit">Login</button>
                </p>
            </form>
        </div>
    );
}

export default Login;

内容的提问来源于stack exchange，提问作者Pedram Arabnejad