React et Axios : guide du débutant sur les appels d'API

Ce tutoriel vous apprendra comment utiliser Axios pour obtenir des données, puis comment les manipuler et enfin les afficher sur votre page grâce au filtrage. En cours de route, vous apprendrez à utiliser le mappage, les filtres et les méthodes d'inclusion. Plus important encore, vous créerez un chargeur simple pour gérer l'état de chargement des données obtenues à partir du point de terminaison de l'API.

1. Projet d'installation

Créons un projet React à l'aide de la commande create-react-app dans le terminal :

npx create-react-app project-name

Ensuite, ouvrez le répertoire du projet via une fenêtre de terminal et tapez npm install axios pour installer Axios localement pour le projet.

2.Sélectionnez l'API cible

Nous utiliserons l'API Random User Generator pour obtenir des informations utilisateur aléatoires à utiliser dans notre application.

Ajoutons le module Axios à notre application en l'important dans notre fichier App.js.

import axios from 'axios'

L'API Random User Generator offre une gamme d'options pour créer différents types de données. Vous pouvez consulter la documentation pour plus d'informations, mais pour ce didacticiel, nous resterons simples.

Nous voulons obtenir dix utilisateurs différents, nous avons juste besoin du prénom, du nom et de l'identifiant unique, ce dont React a besoin lors de la création de la liste d'éléments. Aussi, pour rendre l'appel plus précis, prenons comme exemple l'option de nationalité.

Voici l'URL de l'API que nous appellerons :

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

Veuillez noter que je n'utilise pas l'option id 选项，因为它有时会为某些用户返回 null 。因此，为了确保每个用户都有一个唯一的值，我在 API 中包含了 registered fournie dans l'API.

Vous pouvez copier et coller ceci dans votre navigateur et vous verrez les données renvoyées au format JSON.

Maintenant, la prochaine étape consiste à effectuer l'appel API via Axios.

3. Créer un état d'application

Tout d'abord, créons un état à l'aide de useState hooks dans React afin que nous puissions stocker les données récupérées.

Dans notre composant App, importez le hook App 组件中，从 React 导入 useState depuis React et créez l'état comme indiqué ci-dessous.

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;

Ici, vous pouvez voir le statut users 和 store. L'un sera utilisé à des fins de filtrage et ne sera pas édité, l'autre contiendra les résultats filtrés qui seront affichés dans le DOM.

4.Utilisez axios pour obtenir des données

La prochaine chose que nous devons faire est de créer une méthode getUsers 函数来处理数据的获取。在此函数中，我们使用 axios 使用 get pour obtenir des données de l'API.

Maintenant, afin d'afficher les données que nous avons récupérées lors du chargement de la page, nous allons importer une fonction appelée useEffect 的 React hook，并在其中调用 getUsers .

useEffect 钩子基本上管理功能组件中的副作用，它类似于 React 基于类的组件中使用的 componentDidMount() Crochets de cycle de vie. Ce hook accepte un tableau vide comme deuxième paramètre pour le nettoyage des effets secondaires.

Mettez à jour le code dans le composant App comme indiqué ci-dessous afin que nous puissions inspecter les données de réponse dans la console.

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;

Lorsque vous vérifiez la console, vous verrez une sortie d'objet. Si vous ouvrez cet objet, il y a un autre objet à l'intérieur, un tableau nommé data，而在 data 里面，有一个名为 results.

Si nous voulons renvoyer une valeur spécifique à partir du résultat, nous pouvons mettre à jour l'appel axios.get comme ceci :

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

Ici, nous enregistrons le nom de la première valeur dans le tableau de résultats.

5.Traitement des données de résultats

Utilisons maintenant la méthode map intégrée de JavaScript pour parcourir chaque élément du tableau et créer un nouveau tableau d'objets JavaScript avec une nouvelle structure.

Mettez à jour votre fonction getUsers avec le code suivant :

  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);
      });
  };

Dans le code ci-dessus, nous avons créé une variable nommée newData. Il stocke les résultats de la visualisation du tableau response.data.results à l'aide de la méthode newData 的变量。它存储使用 map 方法查看 response.data.results 数组的结果。在 map 回调中，我们将数组的每个元素引用为 result （注意单数/复数差异）。此外，通过使用数组中每个对象的键值对，我们使用 name 和 id. Dans le rappel map, nous référençons chaque élément du tableau comme un résultat (notez la différence singulier/pluriel). De plus, en utilisant les paires clé-valeur pour chaque objet du tableau, nous créons un autre objet en utilisant les paires clé-valeur name et 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 的其他资源，请随时查看它们。

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!