没有从 React 中的自定义 useAuth 挂钩获取更新的错误值答案

【问题标题】：Not getting updated error value from custom useAuth hook in React没有从 React 中的自定义 useAuth 挂钩获取更新的错误值
【发布时间】：2023-01-12 13:02:51
【问题描述】：

我编写了一个自定义 useAuth 挂钩，它返回注册、登录和错误等功能。但是，如果出现诸如错误的电子邮件和密码之类的错误，即使出现错误，它也不会在 Login.js 中返回更新的错误状态变量，并将用户重定向到表单提交时的 /dashboard。

import { useEffect, useState } from "react";
import useAuth from "../hooks/useAuth";
import { useNavigate } from "react-router-dom";

const Login = () => {
  const [user, setUser] = useState({});
  const { login, error } = useAuth();
  const navigate = useNavigate();

  const handleChange = (e) => {
    setUser({ ...user, [e.target.name]: e.target.value });
  };
  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await login(user);
      navigate("/dashboard");
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
      <h1>Log In</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label htmlFor="email">Email</label>
          <input onChange={handleChange} type="email" name="email" id="email" />
        </div>
        <div>
          <label htmlFor="password">Password</label>
          <input
            onChange={handleChange}
            type="password"
            name="password"
            id="password"
          />
        </div>
        <button>Log In</button>
      </form>
    </div>
  );
};

export default Login;

使用Auth.js

import { useEffect, useState } from "react";
import { account } from "../appwrite/config";
import { ID } from "appwrite";

const useAuth = () => {
  const [error, setError] = useState(null);

  const signup = async (user) => {
    try {
      await account.create(
        ID.unique(),
        user.email,
        user.password,
        user.username
      );
    } catch (error) {
      console.log(error);
      setError(error.message);
    }
  };

  const login = async (user) => {
    setError(null);
    try {
      await account.createEmailSession(user.email, user.password);
    } catch (error) {
      console.log(error);
      setError(error.message);
    }
  };

  const logout = async () => {
    try {
      await account.deleteSession("current");
    } catch (error) {
      console.log(error);
      setError(error.message);
    }
  };
  return { signup, login, logout, error };
};

export default useAuth;

【问题讨论】：

你检查过error.message是否存在？
你总是要去 navigate 到仪表板，因为你在 login 中捕获了错误。设置错误状态后考虑重新抛出

标签： javascript reactjs

【解决方案1】：

在 useAuth 函数中，您需要将错误抛出到 catch 块中，以便在 Login.js 中捕获错误。例如，尝试将您的 login 函数更改为：

const login = async (user) => {
  setError(null);
  try {
    await account.createEmailSession(user.email, user.password);
  } catch (error) {
    console.log(error);
    setError(error.message);
    throw error; // Error that will be caught in Login.js
  }
};

【讨论】：