4

Estoy intentando consumir una API con React y Axios para manipular y luego listar en una tabla todos los valores del resultado de la solicitud.

Los campos son:

  "id": 1,
  "email": "[email protected]",
  "is_active": true,
  "is_admin": true,
  "last_login": "2021-11-19T05:58:15.188197Z",
  "date_joined": "2021-11-18T15:28:21.130179Z"

Pero me esta dando el siguiente error:

TypeError: Cannot read properties of null (reading 'map')

Por lo que puedo comprender del error que me está dando; un elemento o varios del objeto JSON tiene valor null ¿y por eso no puede manipular este elemento?

La consula la hace de forma exitosa

React State:

{JSON.stringify(users, null, 1)}

introducir la descripción de la imagen aquí

EmployeHomeView

import { useEffect, useState } from "react";
import { getUsers } from "../../../services/user/UserDataService";

const EmployeeHomeView = function () {
  const [users, setUsers] = useState(null);
  // Se Ejecuta cada vez que el componente "EmployeHomeView" se carga
  useEffect(() => {
    async function GetRequest() {
      const result = await getUsers();
      setUsers(result);
      console.log(users);
    }
    GetRequest();
  }, []);

  return (
    <>
      <h3>React State:</h3>
      {/* <pre>{JSON.stringify(users, null, 1)}</pre> */}
      {/* {users.map(function (user) {
        return <li key={user.id}>{user.email}</li>;
      })} */}
    </>
  );
};
export default EmployeeHomeView;

Consola en el navegador:

introducir la descripción de la imagen aquí

5
  • 1
    Y que te imprime el user, podrias mostrar lo que imprime console.log(users)
    – Daniel
    Commented el 27 nov. 2021 a las 15:47
  • Ya actualize el código; coloqué 'console.log(users)' debajo de setUser(users) ¿Es aquí donde lo querias? No sé porque tengo el warning, el use effect tiene un array vacio de dependencia, para que sólo se ejecute cada vez que la pagina es refrescada (cada vez que el componente se renderize). Con respecto al Valor "null" no entiendo, este valor deberia sobre-escribirse al ejecutarse el useEffect
    – Emma R.
    Commented el 27 nov. 2021 a las 16:07
  • 1
    no, lo queria fuera del useEffect , aunque seria mucho mejor si compartieras la api que estas consumiendo, porque practicamente no estas recibiendo nada, en caso de que no, deberias hacer un console log dentro del useEffect console.log('mostar resultados', result) y fuera del useEffect , console.log('resultado users', users); ahi te darias mas o menos una idea, de porque tus datos son null
    – Daniel
    Commented el 27 nov. 2021 a las 17:58
  • 1
    El problema esta en const [users, setUsers] = useState(null);, en el primer render users es de tipo null y el método map solo funciona con tipo array, como comentan el la respuesta debes inicializar con un arreglo vacío const [users, setUsers] = useState([]);
    – g.4
    Commented el 27 nov. 2021 a las 19:33
  • @Daniel estoy usando en backend Django Rest Framework docs.djangoproject.com/en/3.2/topics/auth/customizing estoy consumiendo esa tabla. Gracias por el dato
    – Emma R.
    Commented el 27 nov. 2021 a las 21:56

1 respuesta 1

4

Cuando tu componente carga por primera ves, el valor de users es null, tal como lo indicas tu aquí const [users, setUsers] = useState(null); por lo que en el primer render, al intentar hacer users.map te va a dar tu error porque users es null.

Hay dos cosas que podrías hacer. Una sería tener una validación antes de hacer users.map, algo como Array.isArray(users) && users.map... o users && users.map.... Otra opción sería, mas sencilla por cierto, sería hacer que el valor inicial de users sea simplemente un array vacío en vez de null const [users, setUsers] = useState([]);

Tu useEffect efectivamente se va a ejecutar en el primer render pero el valor de setUsers no va a ser lo que sea que devuelva el request hasta el siguiente render, cuando llamas a setUser despues de obtener la respuesta.

Con respecto al por qué tu console.log(users) te muestra un null justo despues de actualizarlo con setUsers es porque useState es asyncrono por lo que si usas su valor inmediatamente despues de actualizarlo, no vas a tener su valor mas reciente si no el anterior.

2
  • Gracias!! prefiero controlarlo como explicas en la primera opcion ya que si la consulta me devuelve null la aplicación va a explotar Array.isArray(users) & users.length > 0. ¿Como resuelvo el warning de la consola? el que se encuentra en la foto React Hook useEffect has a missing dependency: 'users'. Either include it or remove the dependency array
    – Emma R.
    Commented el 27 nov. 2021 a las 22:03
  • 1
    No estoy seguro si quizá te está apareciendo porque pusiste un console.log referenciando a users dentro del useEffect pero de no ser así supongo que puedes ignorarlo ya que solo quieres que se ejecute una vez y no cada vez que users cambie. Commented el 28 nov. 2021 a las 1:12

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.