1

Estoy intentando hacer una petición get con React y Node. El problema es que la data sí llega al front, pero no aparece nada en pantalla, no sé cual es el problema, porque no me da ningún error. En el useEffect mando a llamar loadFuncionarios y luego, pongo la data en el hook. Dejo parte de mi código del frontend:

const [resultPerfiles, setResultPerfiles] = useState([]);

const loadFuncionarios = async () => {
const token = getCookie("token");
await axios
  .get(`${process.env.REACT_APP_API_URL}/user`, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  })
  .then((res) => {
    console.log("esto es res: ", res.data);
    setResultPerfiles(res.data) 
  })
  .catch((err) => {
    console.log("Hubo un error en su petición", err);
  })};

Mi código en el HTML:

return (

  <Navbar />
  <Container>
    <ToastContainer />
    <h2>Datos</h2>
    <Row>
      <div>
        {resultPerfiles.map((item) => {
          <h2>{item.role}</h2>;
        })}
      </div>
    </Row>
  </Container>

); }

ya he intentado de todo, no sé qué pueda ser. En el backend me imprime tal y como se los mencioné: un arreglo de objetos. Espero su ayuda, muchas gracias.

Edit: lo que me llega en el frontend es esto: introducir la descripción de la imagen aquí

Este es el useEffect que llama a loadFuncionarios

introducir la descripción de la imagen aquí

Y esta hay en el backend (aunque en consola si se pinta el arreglo): introducir la descripción de la imagen aquí

4
  • console.log("esto es res: ", res.data); Esta linea si la logras ver en la consola?
    – Sr1871
    Commented el 3 abr. 2022 a las 22:22
  • Sí, me devuelve un arreglo de objetos... he intentado cambiar el set del hook a: setResultPerfiles([{...resultPerfiles, res.data}]) pero nada, e incluso me lanza errores. Commented el 3 abr. 2022 a las 22:36
  • ¿Cómo luce el objeto que te llega? ¿Podríás adjuntar una muestra editando tu pregunta? Me refiero al objeto que te llega en res.data. ¿Dónde llamas a la función loadFuncionarios y que objetivo tiene ese await cuando ya usas then, y no estás esperando ningún resultado, no le veo sentido a eso.
    – Jaime
    Commented el 4 abr. 2022 a las 1:36
  • Claro, ya las agregué y también retiré el await y async. Commented el 4 abr. 2022 a las 2:06

1 respuesta 1

1

¡Ya lo resolví!

simplemente agregando un return dentro de la sintaxis JSX:

return (
<>
  <Navbar />
  <Container>
    <Row>
      <div>
        {resultPerfiles.map((item) => {
          return ( //AQUÍ
            <>
              <h2>{item.name}</h2>
            </>
          );
        })}
      </div>
    </Row>
  </Container>
</>

); }

Aunque si alguien sabe el porqué, le quedaría muy agradecido.

1
  • 2
    Lo que pasa es que map recibe una funcion, la cual debe devolver un valor, en tu ejemplo inicial no devolvias nada... en esta nueva si devuelves algo. En el código inicial, bastaba con quitar las llaves y dejarlo solo: {resultPerfiles.map((item) => <h2>{item.role}</h2>)}
    – Pipe
    Commented el 4 abr. 2022 a las 15:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.