你应该在 React 组件的哪个位置发出 AJAX 请求？

在大多数现代 Web 应用程序中，后端与前端是分开的。因此，它需要通过 AJAX 请求从远程端点（服务器）获取数据。

这些 AJAX 请求应该在组件被渲染到浏览器之后发出，并且通常只需要发出一次。因此，发出请求的最佳位置是在 useEffect 挂钩内。让我们看一下如何实现这一点。

创建反应应用程序：

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

npx create-react-app myapp

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

cd myapp

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

初始文件夹结构

实现：现在我们已经建立了项目，让我们将位于src文件夹中的 App.js 的内容替换为以下代码。

App.js

import React, { useState, useEffect } from "react";
  
const App = () => {
  const [text, setText] = useState("Data has not been fetched yet!");
    
  useEffect(() => {
    fetch("https://catfact.ninja/fact")
      .then((response) => response.json())
      .then(({ fact }) => setText(fact))
      .catch((error) => {
        setText("An error occurred!");
      });
  }, []);
    
  return 
{text}
;
};
  
export default App;

运行应用的步骤：使用以下命令在开发模式下运行应用，并在浏览器中打开 http://localhost:3000 进行查看：

npm start

输出：

每次我们重新加载时，显示的文本都会从“尚未获取数据！”响应数据

说明：在这里，我们在 useEffect 钩子中发出 AJAX 请求，并借助免费使用的 API。 useEffect 钩子有第二个参数：一个空数组。这个数组称为依赖数组，如果依赖数组中存在的任何项在组件的连续渲染之间发生变化，则执行 useEffect 内部的代码（组件中可以有多个 useEffect）。因此，一个空的依赖数组意味着我们 useEffect 中的代码在第一次渲染时只会运行一次。

收到响应后，我们将文本变量的值从“尚未获取数据！”更改为“尚未获取数据！”到响应数据。这样我们就可以看到AJAX请求已经成功了。