¿Cómo manejar el objeto vacío antes del montaje en ReactJS?

En este artículo, veremos cómo manejar objetos vacíos antes de montarlos en ReactJs. El problema es que cuando hacemos cualquier búsqueda de datos o autenticación de usuarios. Requieren que se mantenga algún tipo de datos en la aplicación. En el caso de la autenticación del usuario, debemos iniciar la sesión del usuario o registrarse y luego mantener un estado de la aplicación en el que el usuario haya iniciado sesión y ahora tenga derecho a acceder a los datos protegidos. . Mientras que en el caso de la obtención de datos, primero tenemos que cargar los datos y luego realizar varias operaciones en ellos. Pero, ¿qué pasa con el estado de la aplicación cuando los datos no se obtienen o se comienzan a obtener? Entenderemos con un ejemplo cómo manejar esta situación. 

Creación de la aplicación React e instalación del módulo:

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Paso 3:  Instalar módulos

npm install react-spinners axios

Paso 3: Ejecute el servidor de desarrollo usando el siguiente comando:

npm start

Estructura del proyecto: Tendrá el siguiente aspecto.

Ejemplo: agregue el siguiente código en los archivos respectivos.

import { useState } from "react";
import axios from "axios";
import ClipLoader from "react-spinners/ClipLoader";
  
function App() {
  const [Joke, setJoke] = useState([]);
  const [loading, setLoading] = useState(false);
  const fetchData = async () => {
    setLoading(true);
    var options = {
      method: "GET",
      url: "https://matchilling-chuck-norris-jokes-v1.p.rapidapi.com/jokes/random",
      headers: {
        accept: "application/json",
        "x-rapidapi-host": "matchilling-chuck-norris-jokes-v1.p.rapidapi.com",
        "x-rapidapi-key": "ffc2438edbmsh0a88b634e6e77a7p123125jsnfb163d4d72f7",
      },
    };
  
    let data = await axios.request(options);
    console.log("data,", data.data);
    setJoke([...Joke, data.data]);
    setLoading(false);
  };
  
  let jokesArray;
  if (Joke.length >= 1) {
    jokesArray = Joke.map((el) => {
      return (
        <div
          key={el.id}
          style={{
            width: "350px",
            display: "flex",
            flexDirection: "column",
            alignItems: "center",
            margin: "10px",
            border: "2px solid green",
            padding: "5px",
          }}
        >
          <div style={{ width: "50px" }}>
            <img src={el.icon_url} style={{ objectFit: "cover" }} alt="" />
          </div>
          <h4>{el.value} </h4>
        </div>
      );
    });
  } else {
    jokesArray = "Click on the button to fetch Jokes";
  }
  
  const handleClick = () => {
    fetchData();
  };
  
  return (
    <div
      className="App"
      style={{
        margin: "20px",
        padding: "20px",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        flexDirection: "column",
      }}
    >
      <div>
        <button
          onClick={handleClick}
          style={{
            padding: "10px",
            outline: "none",
            border: "none",
            backgroundColor: "green",
            opacity: ".7",
            borderRadius: "10px",
            color: "white",
            cursor: "pointer",
          }}
        >
          Fetch Joke
        </button>
      </div>
      <div>{loading ? <ClipLoader /> : jokesArray}</div>
    </div>
  );
}
  
export default App;

Explicación: aquí hemos creado dos estados, es decir, una serie de chistes obtenidos y el segundo está cargando . Haremos que la carga sea verdadera antes de obtener el chiste y lo configuraremos como falso después de que se haya completado la operación. Y hay un JSX condicional que generará un control giratorio sobre la base de este estado de carga . Cuando la carga es verdadera, solo mostrará la rueda giratoria y cuando se establece en falso, mostrará la array de chistes, que es la información que queremos mostrar. Este JSX condicional no es complicado, solo hemos usado un operador ternario. Hemos configurado un controlador onClick que llamará a fetchData()función que es responsable de buscar un chiste y agregarlo al estado (array de chistes). El enfoque para manejar objetos vacíos o arrays antes del montaje es que podemos declarar una variable que contendrá datos sobre la base de la condición inicial, es decir, cuando la longitud de la array es al menos 1, entonces tenemos que mostrar los chistes en el formato adecuado, de lo contrario podemos muestre algún texto que sea útil para el usuario sobre cómo obtener datos interactuando con la interfaz de usuario de la aplicación web. También da una buena experiencia de usuario.

Salida: observe que el texto cambia cuando se hace clic en el botón, que inicialmente muestra cómo obtener chistes.