如何通过 API 获取使用 React 应用程序创建随机笑话？

在本教程中，我们将创建一个从外部 API 获取数据（笑话）并将其显示在屏幕上的网站。我们将完全使用 React 来建立这个网站。每次我们重新加载页面并单击按钮时，React 都会获取一个新笑话并将其呈现在屏幕上。由于我们在这个项目中使用 React，我们不需要重新加载页面来显示获取的数据。

“按钮”组件。 “App”文件是一个功能组件，包含一个状态变量 Joke，它最初设置为空字符串，并且根据 Joke 的状态，输出被渲染。如果 Joke 包含空字符串或 Joke 的值，则组件输出“Button”组件 如果它不为空。正在渲染的“Button”组件也是一个输出按钮元素的导入功能组件。我们还将一些道具传递给“按钮”组件，这是一个名为 callAPI 的方法。

先决条件：本项目的先决条件是：

• 反应
• 函数组件
• ReactJS AJAX 和 API
• ES6

创建这个应用程序的原因：构建这样一个简单的网站的目的是获得一些使用 API 的经验，因为它们或多或少是相同的。该网站使用一个简单的界面，我们有一个按钮，当悬停时会改变颜色，当单击时会向某些外部 API 发出请求并获取数据。

示例：使用命令npx create-react-app创建一个新的 React 项目。在同一个目录中，我们有一个index.js文件，它管理我们所有的组件并将 App 组件呈现到屏幕上。

• 第 1 步（创建 Button.js）：在开始使用 ReactJS 部分之前，创建组件 Button.js。这将分别用于返回 Button 和 App 组件。

  Button 组件接受道具并呈现一个按钮。我们为按钮添加了一个事件侦听器，单击该按钮会调用函数callAPI()。 callAPI()函数将在下一节中详细讨论。 Button 组件非常简单，不需要太多解释。它只返回一个按钮元素。

  按钮.js：

  Javascript

  // Import React (Mandatory Step).
  import React from "react";
    
      // Create a functional component
      const Button = (props) => {
          return 
           Hello Geek!!
           ;
      }
    
  // Export Button Component
  export default Button;

  
  
  

• App.js：此文件将返回作为所有其他组件的容器的主应用程序。在这个项目中，我们只使用了功能组件，但同样可以使用类组件来完成。 App 组件是所有其他组件的父组件。它返回一个带有条件语句的 div，如果 Joke 变量的值为空字符串(“”)，则返回 Button 组件，否则返回存储在 Joke 中的带有段落标签的字符串。

  首先，我们定义了一个初始化为“”的状态变量。它已被解构，因此我们可以直接访问 Joke 变量和 setJoke() 可用于更改 Joke 的状态。

  我们还有一个 callAPI() 调用 API，获取响应，并将其传递给 json()，后者获取响应流并将其读取完成。它返回一个 Promise，解析为 JSON 解析正文文本的结果，它是数据类型对象、字符串等的 JavaScript 值。它返回一个对象，该对象具有一个名为 joke 的属性，可以使用data.joke访问，并且可以使用 console.log(data.joke) 登录控制台。然后我们使用 setJoke as data.joke来改变 Joke 变量的状态。

  当我们将状态设置为 data.joke 时，react 会重新渲染整个组件。并且存储在 Joke 中的字符串显示在字符串上。

  Javascript

  // Import React (Mandatory Step).
  import React from "react";
  // Import ReactDOM (Mandatory Step).
  import ReactDOM from "react-dom";
    
  // Import The Button Component from Button.js 
  import Button from "./Component/Button";
    
  const rootElement = document.getElementById("root");
    
  // Create a functional component
  const App = () => {
      // Declare a state variable
      const [Joke, setJoke] = React.useState("");
    
      const fetchApi = () => {
          // Fetching data from the API
              fetch("https://sv443.net/jokeapi/v2/joke/Programming?type=single")
              .then((res) => res.json())
              .then((data) => setJoke(data.joke));
        };
    
      return (
          // Return the Button Component with a conditional statement
          
  {Joke === "" ?  : 
  {Joke}
  }
        );
  }
    
  // Rendering the App Component.
  ReactDOM.render(
      ,
    rootElement
  );
  export default App
  

输出：我们的应用程序现在已经完成并且可以运行了，虽然应用程序很简单，但它有助于理解如何在 react 中进行 API 调用，并操纵收到的响应以在应用程序中使用它。