React と Axios: API 呼び出しの初心者ガイド

このチュートリアルでは、Axios を使用してデータを取得する方法、次にそれを操作する方法、そして最終的にフィルタリングを通じてページに表示する方法を説明します。その過程で、マッピング、フィルター、および include メソッドの使用方法を学習します。最も重要なのは、API エンドポイントから取得したデータの読み込みステータスを処理する単純なローダーを作成することです。

1. プロジェクトのセットアップ

ターミナルで create-react-app コマンドを使用して React プロジェクトをセットアップしましょう:

リーリー

次に、ターミナル ウィンドウでプロジェクト ディレクトリを開き、npm install axios と入力して、プロジェクトの Axios をローカルにインストールします。

2.ターゲット API の選択

Random User Generator API を使用して、アプリケーションで使用するランダムなユーザー情報を取得します。

Axios モジュールを App.js ファイルにインポートして、アプリケーションに追加しましょう。

リーリー

ランダム ユーザー ジェネレーター API は、さまざまなタイプのデータを作成するための幅広いオプションを提供します。詳細についてはドキュメントを参照してください。ただし、このチュートリアルでは簡単に説明します。

10 人の異なるユーザーを取得したいと考えています。必要なのは、姓、名、および一意の 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 フックをインポートし、以下に示すように状態を作成します。

リーリー

ここでは、users と store のステータスを確認できます。 1 つはフィルタリングの目的で使用され、編集されません。もう 1 つは、DOM に表示されるフィルタリングされた結果を保持します。

4.axios を使用してデータを取得する

次に行う必要があるのは、データの取得を処理する getUsers 関数を作成することです。この関数では、axios を使用して、get メソッドを使用して API からデータを取得します。

ここで、ページの読み込み時に取得したデータを表示するために、useEffect という名前の React フックをインポートし、その中で getUsers 関数を呼び出します。

useEffect フックは基本的に機能コンポーネントの副作用を管理し、React クラスベースのコンポーネントで使用される componentDidMount() ライフサイクル フックに似ています。このフックは、副作用をクリーンアップするための 2 番目の引数として空の配列を受け入れます。

App コンポーネントのコードを以下に示すように更新して、コンソールで応答データを検査できるようにします。

リーリー

コンソールを確認すると、オブジェクトの出力が表示されます。このオブジェクトを開くと、内部に data という名前の別のオブジェクトがあり、データの内部に results という名前の配列があります。

結果から特定の値を返したい場合は、axios.get 呼び出しを次のように更新できます。

リーリー

ここでは、結果配列の最初の値の名前を記録します。

5.処理結果データ

次に、JavaScript の組み込み map メソッドを使用して、配列内の各要素を反復処理し、新しい構造を持つ JavaScript オブジェクトの新しい配列を作成しましょう。

次のコードで getUsers 関数を更新します:

リーリー

上記のコードでは、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 中国語 Web サイトの他の関連記事を参照してください。