1

Estoy consumiendo un api, esta me retorna null si no existen usuarios en la base de datos. El problema que tengo es con el else

else {
  return (
    <>
      <h1>No hay informacion para mostrar</h1>
    </>
  );
}

El primer render se ejecuta porque la página carga por primera vez, en este momento es su valor inicial es null.

Cuando esto sucede, se ejecuta el mensaje "No hay información para mostrar" y quiero evitar esto, ya que se puede percibir cuando se muestra el mensaje (dura alrededor de 1 segundo o menos),

Código:

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

const EmployeeHomeView = function () {
  const [users, setUsers] = useState(null);

  useEffect(() => {
    async function GetRequest() {
      const result = await getUsers();
      setUsers(result);
    }
    GetRequest();
  }, []);

  if (Array.isArray(users) && users.length > 0) {
    return (
      <>
      // Existen usuarios
      // Muestra una tabla de todos los usuarios
      </>
    );
  } else {
    return (
      <>
        <h1>No hay informacion para mostrar</h1>
      </>
    );
  }
};
export default EmployeeHomeView;

1 respuesta 1

2

Tienes el ejemplo funcionando en: https://codesandbox.io/s/practical-christian-c72kw?file=/src/EmployeeHomeView.js

Como bien dices, hay 3 estados y se está mostrando uno mientras aún no hay información, entonces mi recomendación sería, has render de los 3 estados:

  • Si users es null
  • Si users es Arreglo y tiene un elemento
  • Cualquier otra cosa.

El código sería:

  if (users == null) {
    return <div>Loading</div>
  }
  
  if (Array.isArray(users) && users.length > 0) {
    return (
      <>
        {users.map(user => <p>{user.name}</p>)}
      </>
    );
  } else {
    return (
      <>
        <h1>No hay informacion para mostrar</h1>
      </>
    );
2
  • El enlace que publicaste está vacio, gracias ! ya entendi, modifique el tu if, me quedo asi: users === null || users === undefined
    – Emma R.
    Commented el 29 nov. 2021 a las 0:16
  • 1
    Disculpa, tienes razón, igual lo actualicé para que sea útil para alguien más en el futuro: codesandbox.io/s/practical-christian-c72kw?file=/src/…
    – joseglego
    Commented el 29 nov. 2021 a las 10:14

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.