Есть ли способ предотвратить перенаправление пользователя в случае ошибки?

Содержание

Вопрос или проблема
Ответ или решение
Объяснение изменений:

Вопрос или проблема

У меня есть простая форма регистрации, которая работает отлично, но я заметил, что при возникновении ошибки она все равно перенаправляет на главную страницу.

import { Loader, Lock, Mail, User } from "lucide-react";
import React, { useState } from "react";
import { motion } from "framer-motion";
import Input from "../components/Input";
import { Link, useNavigate } from "react-router-dom";
import PasswordStrengthMeter from "../components/PasswordStrengthMete";
import { useAuthStore } from "../store/auth.store";

export const SignUpPage = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const { signup, error, isLoading } = useAuthStore();
  const navigate = useNavigate();

  const handleSignUp = async (e) => {
    e.preventDefault();
    try {
      await signup(email, password, name);
     if(!error){
      navigate("/");
     }
    } catch (error) {
      console.log(error);
    }
  };

//authStore.jsx
import { create } from "zustand";

const API_URI = "http://localhost:3001/api/auth";
export const useAuthStore = create((set) => ({
  isLoading: false,
  error: null,
  isAuthenticated: false,
  isCheckingAuth: false,
  message: null,
  user: null,

  signup: async (email, password, name) => {
    set({ isLoading: true, error: null });
    try {
      const options = {
        credentials: "include",
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ email, password, name }),
      };

      const response = await fetch(`${API_URI}/signup`, options);
      console.log(response);

      if (!response.ok) {
        const data = await response.json();
        throw new Error(data.message);
      }

      const data = await response.json();
      set({ user: data.user, isAuthenticated: true, isLoading: false });
    } catch (error) {
      set({
        error: error.message || "Ошибка регистрации",
        isLoading: false,
      });
    }
  },

Когда я пытаюсь вернуться в браузер и нажимаю кнопку отправки, теперь это предотвращает перенаправление, потому что ошибка теперь хранится в переменной. Я полагаю, логика срабатывает первой, прежде чем переменная ошибки будет сохранена. Вот почему! Есть ли лучший способ сделать это? Или как работает логика?

Проверьте тип данных Переменной ошибки

Строка ошибки: “Текст”

if (!error) { 
 // сделать что-то
}

Объект ошибки: { message: “Текст” }

if (Object.keys(error).length === 0) { 
 // сделать что-то
}

Массив (Ошибка: [] или [{status: “Текст”}])

if (Object.keys(error).length === 0) { 
 // сделать что-то
}

Ответ или решение

Да, есть способ предотвратить перенаправление пользователя на главную страницу, если произошла ошибка при регистрации. В вашем коде, перенаправление происходит на основе проверки переменной error после вызова функции signup. Однако, в текущем коде, состояние ошибки обновляется асинхронно и не всегда успевает обновиться к моменту проверки. Для того чтобы улучшить логику, вы можете использовать подход с обработкой состояния в самом методе handleSignUp или полагаться на использование локального состояния для ошибок.

Вот пример корректировки вашего кода:

Убедитесь, что error правильно проверяется после вызова функции signup.
Используйте useEffect, чтобы управлять перенаправлением после изменения состояния ошибки.
Обновите логику обработки ошибки в функции handleSignUp.

Ниже представлен обновленный код:

import { Loader, Lock, Mail, User } from "lucide-react";
import React, { useState, useEffect } from "react";
import { motion } from "framer-motion";
import Input from "../components/Input";
import { Link, useNavigate } from "react-router-dom";
import PasswordStrengthMeter from "../components/PasswordStrengthMete";
import { useAuthStore } from "../store/auth.store";

export const SignUpPage = () => {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const { signup, error, isLoading } = useAuthStore();
  const navigate = useNavigate();

  const handleSignUp = async (e) => {
    e.preventDefault();
    await signup(email, password, name); // Убираем try/catch здесь.
  };

  useEffect(() => {
    if (!isLoading && !error) {
      navigate("/");
    }
  }, [isLoading, error, navigate]);

  return (
    <form onSubmit={handleSignUp}>
      {/* Ваши элементы формы */}
      <button type="submit" disabled={isLoading}>
        {isLoading ? <Loader /> : "Зарегистрироваться"}
      </button>
      {error && <p>{error}</p>} {/* Отображаем сообщение об ошибке, если оно есть */}
    </form>
  );
};

// authStore.jsx остается без изменений

Объяснение изменений:

Асинхронная функция: В handleSignUp функция signup вызывается асинхронно, но теперь ошибка не обрабатывается внутри этого блока кода. Мы просто вызываем функцию и позволяем эффекту следить за изменениями состояния.
Использование useEffect: Мы добавили useEffect, который проверяет, завершилась ли загрузка (isLoading) и отсутствует ли ошибка (error). Если обе эти проверки пройдены успешно, тогда происходит перенаправление пользователя на главную страницу.
Отображение сообщений об ошибках: Если ошибка произошла, она будет отображаться под кнопкой регистрации, и пользователь сможет увидеть, что пошло не так, но при этом не будет перенаправлен на главную страницу.

Таким образом, данное решение делает логику обработки ошибок более понятной и управляемой, предотвращая нежелательное перенаправление пользователя в случае ошибки регистрации.