如何在我的 React Hooks 电子商务应用程序中使用 JSON 文件作为虚拟用户的数据库？

Question

我正在创建一个前端虚拟电子商务应用程序。 我创建了一个登录页面，想法是链接 JSON 用户数据库，这些用户都有唯一的用户名、密码和 ID，当您尝试使用参数登录时，如果有用户使用这些参数，您会收到登录成功消息JSON 中的参数，如果没有，您将收到失败消息。 下面是我的登录页面源代码。 现在我刚刚做了一个简单的 if user = user@gmail.com and password = user password，然后你会收到成功消息，但想法是将数据库用于多个用户选项。 JSON 文件将是用户对象的基本数组。

PS堆栈溢出不会让我发布代码，除非我输入常量并且语法正确所以我不得不分开使用State使用导航等等

const Login = () => {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')

    const [valid, setValid] = useState(false)
    const [success, setSuccess] = useState(false)

    const navigate = useNavigate()

    const handle Submit = (e) => {
      if (email === 'user@gmail.com' && password === 'user password') {
        setValid(true)
        setSuccess(true)
        setTimeout(() => {
          navigate('/')
        },3000)
      }
      e.preventDefault()
    }
}

Answer 1

我会想象你的用户数组就像你的描述一样

const users = [
    { id: 1, name: 'John',email: 'user1@gmail.com', password: '123456' },
    { id: 2, name: 'Pete' , email: 'user2@gmail.com', password: '123456' },
    { id: 3, name: 'Mary' , email: 'user3@gmail.com', password: '123456' },
];

你提交 function 会像这样

const handleSubmit = (e) => {
    e.preventDefault();
    const user = users.find((user) => user.email === email && user.password === password);
    if (user) {
       // login success
    }
    else {
         // login failed
    }
}

这将检查您的 JSON 数据中是否存在用户信息您可以用您的特定逻辑替换登录成功注释和失败

Answer 2

您可以安装 package json-server https://github.com/typicode/json-server或另一个 package 做同样的事情。