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.

  • es.davy.ai/
  • Programación /
  • Redireccionamiento de React.js después de no encontrar resultados desde una búsqueda en el backend usando useEffect.

Redireccionamiento de React.js después de no encontrar resultados desde una búsqueda en el backend usando useEffect.

28 May, 2023 Programación

Cómo redirigir a un componente de error 404 si no se recibe ningún dato de la respuesta de axios fetch después de usar useFetch.

function EditUser() {
  const { id } = useParams();
  const [userFound, setUserFound] = useState(false);
  useEffect(() => {
    try {
      axios.get(`/api/user/${id}`).then((response) => {
        if (response.data.length > 0) {
          console.log(response);
          setUserFound(true);
        }
      });
    } catch (error) {
      console.log(error);
    }
  }, []);

  if (!userFound) {
    ; // no funciona aunque el estado sea falso
  }
  return (
    

      
{id}

    

  );
}
Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para redireccionar a un componente 404 si no se recibe ningún dato de la petición axios fetch después de usar el hook useFetch, se puede modificar el componente EditUser de la siguiente manera:

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

function EditUser() {
  const { id } = useParams();

  const [userFound, setUserFound] = useState(false);

  useEffect(() => {
    axios.get(`/api/user/${id}`)
      .then((response) => {
        if (response.data.length > 0) {
          setUserFound(true);
        }
      })
      .catch(() => {
        setUserFound(false);
      });
  }, [id]);

  if (!userFound) {
    return <redirect to="/404"></redirect>;
  }

  return (
    <div>
      <h1>{id}</h1>
    </div>
  );
}

export default EditUser;

    En esta versión modificada del componente:

    • Importamos el componente Redirect de react-router-dom.
    • En el hook useEffect(), usamos axios.get() para obtener datos del punto de API, y manejamos los casos de respuesta y error en consecuencia. Si recibimos datos, establecemos el estado userFound en true; de lo contrario, lo establecemos en false.
    • En la parte de representación del componente, comprobamos si userFound es false. Si lo es, devuelve un componente <redirect> que redirige al usuario a la ruta /404.
    • De lo contrario, representamos el componente como de costumbre.

Comments are closed.