React 和 Axios：API 呼叫初學者指南

本教學將教您如何使用 Axios 來獲取數據，然後如何操作它並最終透過過濾功能將其顯示在您的頁面上。您將在過程中學習如何使用映射、過濾器和包含方法。最重要的是，您將建立一個簡單的載入器來處理從 API 端點取得的資料的載入狀態。

1. 設定項目

讓我們在終端機中使用 create-react-app 指令設定一個 React 專案：

npx create-react-app project-name

然後，透過終端機視窗開啟專案目錄，輸入 npm install axios 在本機為專案安裝 Axios。

2.選擇目標API

我們將使用隨機用戶生成器 API 來獲取隨機用戶資訊以在我們的應用程式中使用。

讓我們將 Axios 模組新增到我們的應用程式中，方法是將其導入到我們的 App.js 檔案中。

import axios from 'axios'

隨機使用者產生器 API 提供了一系列用於建立各種類型資料的選項。您可以查看文件以獲取更多信息，但對於本教程，我們將保持簡單。

我們想要取得十個不同的用戶，我們只需要名字、姓氏和唯一的 ID，這是 React 建立元素清單時所需要的。另外，為了讓呼叫更加具體，我們以國籍選項為例。

下面是我們將要呼叫的 API URL：

https://randomuser.me/api/?results=10&inc=name,registered&nat=fr

#請注意，我沒有使用 API 中提供的 id 選項，因為它有時會為某些使用者傳回 null 。因此，為了確保每個使用者都有一個唯一的值，我在 API 中包含了 registered 選項。

您可以將其複製並貼上到瀏覽器中，您將看到傳回的 JSON 格式的資料。

現在，接下來就是透過 Axios 進行 API 呼叫。

3. 建立應用程式狀態

首先，讓我們使用 React 中的 useState 掛鉤來建立狀態，以便我們可以儲存取得的資料。

在我們的 App 元件中，從 React 匯入 useState 鉤子，然後建立如下所示的狀態。

import React, { useState } from "react";
import axios from "axios";

const App = () => {
  const [users, setUsers] = useState([]);
  const [store, setStore] = useState([]);

  return (
    <div>
     
    </div>
  );
};

export default App;

在這裡你可以看到 users 和 store 狀態。一個將用於過濾目的，不會被編輯，另一個將保存將在 DOM 中顯示的過濾結果。

4.使用axios取得資料

接下來我們需要做的是建立一個 getUsers 函數來處理資料的取得。在此函數中，我們使用 axios 使用 get 方法從 API 取得資料。

現在，為了在頁面載入時顯示我們取得的數據，我們將匯入一個名為 useEffect 的 React hook，並在其中呼叫 getUsers 函數。

useEffect 鉤子基本上管理功能元件中的副作用，它類似於 React 基於類別的元件中使用的 componentDidMount() 生命週期鉤子。此鉤子接受一個空數組作為第二個參數，以進行副作用清理。

更新 App 元件中的程式碼，如下所示，以便我們可以在控制台中檢查回應資料。

import React, { useState, useEffect } from "react";

const App = () => {
  const [users, setUsers] = useState([]);
  const [store, setStore] = useState([]);
  
  const getUsers = () => {
    axios.get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr")
      .then(response => console.log(response))
  };
  
  useEffect(() => {
    getUsers();
  }, []);

  return (
    <div>
     
    </div>
  );
};

export default App;

當您檢查控制台時，您將看到一個物件輸出。如果你打開這個對象，裡面有另一個對象，名為 data，而在 data 裡面，有一個名為 results 的陣列。

如果我們想從結果中返回特定值，我們可以更新 axios.get 調用，如下所示：

    axios.get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr")
      .then(response => console.log(response.data.results[0].name.first))

這裡我們記錄了結果陣列中第一個值的名稱。

5.處理結果資料

現在讓我們使用 JavaScript 內建的 map 方法來迭代陣列中的每個元素，並建立一個具有新結構的新 JavaScript 物件陣列。

使用以下程式碼更新您的 getUsers 函數：

  const getUsers = () => {
    axios
      .get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr")
      .then((response) => {
        const newData = response.data.results.map((result) => ({
          name: `${result.name.first} ${result.name.last}`,
          id: result.registered
        }));
        setUsers(newData);
        setStore(newData);
      })
      .catch((error) => {
        console.log(error);
      });
  };

在上面的程式碼中，我們建立了一個名為 newData 的變數。它儲存使用 map 方法查看 response.data.results 陣列的結果。在 map 回呼中，我們將陣列的每個元素引用為 result （注意單數/複數差異）。此外，透過使用陣列中每個物件的鍵值對，我們使用 name 和 id 鍵值對建立了另一個物件。

一般情况下，在浏览器中查看API调用结果，会看到里面有first 和last 键值对name 对象，但没有全名的键值对。因此，从上面的代码中，我们能够组合 first 和 last 名称，在新的 JavaScript 对象中创建全名。请注意，JSON 和 JavaScript 对象是不同的东西，尽管它们的工作方式基本相同。

然后我们将新的中间数据设置为 setUsers 和 setStore 状态。

6. 通过过滤填充数据存储

过滤的想法非常简单。我们有我们的 store 状态，它始终保持原始数据不变。然后，通过在该状态上使用 filter 函数，我们只获取匹配的元素，然后将它们分配给 users 状态。

const filteredData = store.filter((item) => (
    item.name.toLowerCase().includes(event.target.value.toLowerCase()))

filter 方法需要一个函数作为参数，该函数针对数组中的每个元素运行。这里我们将数组中的每个元素称为 item。然后，我们获取每个 item 的 name 键并将其转换为小写，以使我们的过滤功能不区分大小写。

获得 item 的 name 键后，我们检查该键是否包含我们输入的搜索字符串。 includes 是另一个内置 JavaScript 方法。我们将在输入字段中键入的搜索字符串作为参数传递给 includes，如果该字符串包含在调用它的变量中，则它会返回。同样，我们将输入字符串转换为小写，这样无论您输入大写还是小写输入都无关紧要。

最后，filter方法返回匹配的元素。因此，我们只需将这些元素存储在 setUsers 状态中即可。

使用我们创建的函数的最终版本更新 App 组件。

 const filterNames = (event) => {
    const filteredData = store.filter((item) =>
      item.name.toLowerCase().includes(event.target.value.toLowerCase())
    );
    setUsers(filteredData);
  };

7. 创建组件

尽管对于这个小示例，我们可以将所有内容放入 App 组件中，但让我们利用 React 并制作一些小型功能组件。

让我们向应用程序添加几个组件。首先，我们从单独的 JavaScript 文件导入组件（我们将很快定义这些文件）：

import Lists from "./components/Lists";
import SearchBar from "./components/SearchBar";

接下来，我们更新应用程序组件的 return 语句以使用这些组件：

  return (
    <div className="Card">
        <div className="header">NAME LIST</div>
        <SearchBar searchFunction={filterNames} />
        <Lists usernames={users} />
    </div>
  );

目前，我们将只关注功能。稍后我将提供我创建的 CSS 文件。

请注意，我们有 searchFunction 属性用于 SearchBar 组件，以及 usernames 属性用于 Lists 组件.

另请注意，我们使用 users 状态而不是 store 状态来显示数据，因为 users 状态包含已过滤的数据结果。

SearchBar 组件

这个组件非常简单。它仅将 filterNames 函数作为 prop，并在输入字段更改时调用该函数。将以下代码放入 components/SearchBar.js 中：

import React from 'react';

const SearchBar = ({ searchFunction}) => {
  return (
    <div>
        <input className="searchBar" type='search' onChange={searchFunction} />
    </div>
  )
};

export default SearchBar;

列表组件

该组件将简单地列出用户的姓名。这位于 components/List.js 中：

import React from 'react';

const Lists = ({ usernames }) => {
  return (
      <div>
          <ul>
              {usernames.map(username => (
                  <li key={username.id}>{username.name}</li>
              ))}
          </ul>
      </div>
  )
};

export default Lists;

在这里，我们再次使用 map 方法来获取数组中的每个项目，并从中创建一个 <li> 项目。请注意，当您使用 map 创建项目列表时，您需要使用 key 以便 React 跟踪每个列表项目。

8.跟踪加载状态

让我们使用 useState 挂钩创建一个加载状态，以显示何时尚未获取数据。

  const [loading, setLoading] = useState(false);

接下来，我们将更新数据获取方法中的加载状态。

  const getUsers = () => {
    axios.get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr")
      .then((response) => {
        const newData = response.data.results.map((result) => ({
          name: `${result.name.first} ${result.name.first}`,
          id: result.registered,
        }));
        setLoading(true);
        setUsers(newData);
        setStore(newData);
      })
      .catch((error) => {
        console.log(error);
      });
  };

在这里，我们创建了一个 loading 状态并将其初始设置为 false。然后我们在使用 setLoading 状态获取数据时将此状态设置为 true。

最后，我们将更新 return 语句以呈现加载状态。

  return (
    <>
      {loading ? (
        <div className="Card">
          <div className="header">NAME LIST</div>
          <SearchBar searchFunction={filterNames} />
          <Lists users={users} />
        </div>
      ) : (
        <div className="loader"></div>
      )}
    </>
  );

使用 JavaScript 三元运算符，我们在加载状态为 false 时有条件地渲染 SearchBar 和 Lists 组件，然后在加载状态为 true 时渲染加载程序。另外，我们创建了一个简单的加载器来在界面中显示加载状态。

9. 添加一些 CSS 进行样式设置

您可以在下面找到特定于此示例的 CSS 文件。

body,
html {
  -webkit-font-smoothing: antialiased;
  margin: 0;
  padding: 0;
  font-family: "Raleway", sans-serif;
  -webkit-text-size-adjust: 100%;
}

body {
  display: flex;
  justify-content: center;
  font-size: 1rem/16;
  margin-top: 50px;
}

li,
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul {
  margin-top: 10px;
}

li {
  font-size: 0.8rem;
  margin-bottom: 8px;
  text-align: center;
  color: #959595;
}

li:last-of-type {
  margin-bottom: 50px;
}

.Card {
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  border-radius: 10px;
  background-color: white;
  box-shadow: 0 5px 3px 0 #ebebeb;
}

.header {
  position: relative;
  font-size: 20px;
  margin: 12px 0;
  color: #575757;
}

.header::after {
  content: "";
  position: absolute;
  left: -50%;
  bottom: -10px;
  width: 200%;
  height: 1px;
  background-color: #f1f1f1;
}

.searchBar {
  text-align: center;
  margin: 5px 0;
  border: 1px solid #c4c4c4;
  height: 20px;
  color: #575757;
  border-radius: 3px;
}

.searchBar:focus {
  outline-width: 0;
}

.searchBar::placeholder {
  color: #dadada;
}

.loader {
  border: 15px solid #ccc;
  border-top: 15px solid #add8e6; 
  border-bottom: 15px solid #add8e6;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

结论

在本教程中，我们使用随机用户生成器 API 作为随机数据源。然后，我们从 API 端点获取数据，并使用 map 方法在新的 JavaScript 对象中重构结果。

接下来是使用 filter 和 includes 方法创建过滤函数。最后，我们创建了两个不同的组件，并在尚未获取数据时有条件地以加载状态渲染我们的组件。

在过去的几年里，React 越来越受欢迎。事实上，我们在 Envato Market 中有许多项目可供购买、审查、实施等。如果您正在寻找有关 React 的其他资源，请随时查看它们。

以上是React 和 Axios：API 呼叫初學者指南的詳細內容。更多資訊請關注PHP中文網其他相關文章！