如何在React Hooks电商Demo应用中用JSON文件作虚拟用户数据库？

步骤1：准备JSON用户数据 #

先创建一个users.json文件，放在项目公共目录（比如React项目的public文件夹），结构如下：

[
  {
    "id": 1,
    "email": "user@gmail.com",
    "password": "user password"
  },
  {
    "id": 2,
    "email": "admin@shop.com",
    "password": "admin123"
  },
  {
    "id": 3,
    "email": "guest@demo.com",
    "password": "guest456"
  }
]

步骤2：修改登录组件逻辑 #

替换原硬编码校验逻辑，改为读取JSON数据并匹配用户：

import { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';

const Login = () => {
    const [email, setEmail] = useState('');
    const [password, setPassword] = useState('');
    const [valid, setValid] = useState(false);
    const [success, setSuccess] = useState(false);
    const [users, setUsers] = useState([]);

    const navigate = useNavigate();

    // 异步加载JSON用户数据
    useEffect(() => {
        const loadUsers = async () => {
            try {
                const res = await fetch('/users.json');
                const userData = await res.json();
                setUsers(userData);
            } catch (err) {
                console.error('用户数据加载失败:', err);
            }
        };
        loadUsers();
    }, []);

    const handleSubmit = (e) => {
        e.preventDefault();
        // 查找匹配的用户
        const matchedUser = users.find(user => user.email === email && user.password === password);
        
        if (matchedUser) {
            setValid(true);
            setSuccess(true);
            setTimeout(() => {
                navigate('/');
            }, 3000);
        } else {
            // 登录失败反馈
            setValid(false);
            setSuccess(false);
            alert('邮箱或密码错误');
        }
    };

    return (
        <form onSubmit={handleSubmit}>
            <input 
                type="email" 
                value={email} 
                onChange={(e) => setEmail(e.target.value)} 
                placeholder="输入邮箱"
                required
            />
            <input 
                type="password" 
                value={password} 
                onChange={(e) => setPassword(e.target.value)} 
                placeholder="输入密码"
                required
            />
            <button type="submit">登录</button>
            {success && <p style={{color: 'green'}}>登录成功，即将跳转...</p>}
            {!valid && !success && <p style={{color: 'red'}}>邮箱或密码错误</p>}
        </form>
    );
};

export default Login;

关键改动说明 #

• 用useEffect在组件挂载时异步加载用户JSON数据，存入状态users
• 用Array.find()遍历用户数组，匹配输入的邮箱和密码，替代原硬编码判断
• 补充登录失败的提示逻辑，给用户明确的操作反馈

注意事项 #

• 实际生产环境禁止明文存储密码，建议用哈希值（比如bcrypt）校验
• 可添加数据加载状态，避免用户在数据未加载完成时提交表单

内容的提问来源于stack exchange，提问作者Andrej Nedeljkovic