在 ReactJS 中挂载之前如何处理空对象？

在本文中，我们将了解在 ReactJs 中挂载之前如何处理空对象。问题是当我们进行任何数据获取或用户身份验证时。在用户身份验证的情况下，他们需要在应用程序中维护某种数据，我们必须让用户登录或注册，然后维护用户已登录的应用程序状态，现在他有权访问受保护的数据.而在获取数据的情况下，我们必须先加载数据，然后对其进行各种操作。但是当数据未获取或开始获取时，应用程序状态如何。我们将通过一个示例来了解如何处理这种情况。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序。

npx create-react-app foldername

第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：

cd foldername

第 3 步：安装模块

npm install react-spinners axios

第 3 步：使用以下命令运行开发服务器：

npm start

项目结构：它将如下所示。

示例：在各个文件中添加以下代码。

App.js

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 (
        

          

            
          
          
{el.value} 
        
      );
    });
  } else {
    jokesArray = "Click on the button to fetch Jokes";
  }
  
  const handleClick = () => {
    fetchData();
  };
  
  return (
    

      

        
          Fetch Joke
        
      
      
{loading ?  : jokesArray}
    
  );
}
  
export default App;

解释：这里我们做了两个状态，即一组获取的笑话，第二个是加载。我们将在获取笑话之前将loading设置为 true，并在操作完成后将其设置为 false。并且有一个条件 JSX 会根据这个加载状态渲染一个微调器。当加载为真时，它将只显示微调器，当它设置为假时，它将呈现我们想要显示的数据的笑话数组。这个条件 JSX 并不复杂，我们只是使用了一个三元运算符。我们已经设置了一个 onClick 处理程序，它将调用 fetchData()函数，该函数负责获取笑话并将其添加到状态（笑话数组）。在挂载之前处理空对象或数组的方法是，我们可以声明一个变量，该变量将根据初始条件保存数据，即当数组的长度至少为 1 时，我们必须以正确的格式显示笑话，否则我们可以显示一些有助于用户通过与 Web 应用程序的 UI 交互来获取数据的文本。它还提供了良好的用户体验。

输出：请注意，单击按钮时文本会发生变化，最初显示如何获取笑话。