es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Las múltiples devoluciones en un componente de función de React no están funcionando.

29 Jul, 2023 Programación

Mientras trabajaba en mi proyecto de React, he utilizado el comando <Redirect />, hasta ayer todo iba bien, pero ahora me he dado cuenta de que las devoluciones de llamada que no son la devolución principal, las devoluciones de llamada dentro de las funciones lambda, no están funcionando y no están cambiando la URL.

Código de ejemplo:

const Register = () => {
   const [errorMessage, setError] = useState('');
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [full_name, setFullname] = useState('');

   const submit = async (e) => {
      e.preventDefault();
      const userDetails = {email, full_name, password};
      try {
         await axios.post('register', userDetails);
         return <Redirect to={''} />; // no está funcionando.
      } catch (error) {
         setError(error.response.data.error);
      }
   }

   return (

Esto significa que solo la última devolución de llamada en la última fila que he copiado está funcionando y la devolución de llamada después de la solicitud POST no lo está.
Incluso si intento escribir algo como return (

);, no está funcionando.
Estaré encantado si alguien puede ayudar y pido disculpas de antemano si la explicación no es clara, es la primera vez que pido ayuda aquí.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema que estás enfrentando está relacionado con el uso del componente Redirect de la biblioteca react-router-dom. El componente Redirect no debería ser utilizado dentro de una función con una declaración de retorno que no sea la declaración de retorno principal del componente.

    En tu fragmento de código, estás tratando de usar Redirect dentro de la función submit, lo cual no está permitido. En cambio, deberías renderizar el componente Redirect de manera condicional basado en un cierto estado. Aquí tienes un ejemplo de cómo puedes lograr esto:

    import React, { useState } from 'react';
import { Redirect } from 'react-router-dom';
import axios from 'axios';

const Register = () => {
  const [errorMessage, setError] = useState('');
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [full_name, setFullname] = useState('');
  const [shouldRedirect, setShouldRedirect] = useState(false);

  const submit = async (e) => {
    e.preventDefault();
    const userDetails = { email, full_name, password };
    try {
      await axios.post('register', userDetails);
      setShouldRedirect(true);
    } catch (error) {
      setError(error.response.data.error);
    }
  };

  if (shouldRedirect) {
    return <redirect to="/"></redirect>;
  }

  return (
    <div>
      {/* tu código de formulario aquí */}
    </div>
  );
};

export default Register;

    En este ejemplo, estamos utilizando una nueva variable de estado llamada shouldRedirect, que se actualiza a true cuando el envío es exitoso. Luego, renderizamos de manera condicional el componente Redirect en el nivel superior del componente en base al valor de shouldRedirect.

    ¡Espero que esto te ayude! Déjame saber si tienes alguna pregunta adicional.

Comments are closed.