React와 Axios: API 호출에 대한 초보자 가이드

이 튜토리얼에서는 Axios를 사용하여 데이터를 가져오는 방법, 데이터를 조작하는 방법, 필터링을 통해 최종적으로 페이지에 표시하는 방법을 설명합니다. 그 과정에서 매핑, 필터 및 포함 메서드를 사용하는 방법을 배우게 됩니다. 가장 중요한 것은 API 엔드포인트에서 얻은 데이터의 로드 상태를 처리하기 위한 간단한 로더를 생성한다는 것입니다.

1. 설치 프로젝트

터미널에서 create-react-app 명령을 사용하여 React 프로젝트를 설정해 보겠습니다.

으아아아

그런 다음 터미널 창을 통해 프로젝트 디렉토리를 열고 npm install axios를 입력하여 프로젝트에 대해 로컬로 Axios를 설치합니다.

2.대상 API 선택

Random User Generator API를 사용하여 애플리케이션에서 사용할 임의의 사용자 정보를 얻습니다.

Axios 모듈을 App.js 파일로 가져와 애플리케이션에 추가해 보겠습니다.

으아아아

Random User Generator 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에서 App 组件中，从 React 导入 useState 후크를 가져오고 아래와 같이 상태를 만듭니다.

으아아아

여기에서 users 和 store 상태를 볼 수 있습니다. 하나는 필터링 목적으로 사용되며 편집되지 않으며, 다른 하나는 DOM에 표시될 필터링된 결과를 보유합니다.

4.axios를 사용하여 데이터 획득

다음으로 해야 할 일은 API에서 데이터를 가져오는 getUsers 函数来处理数据的获取。在此函数中，我们使用 axios 使用 get 메서드를 만드는 것입니다.

이제 페이지가 로드될 때 가져온 데이터를 표시하기 위해 useEffect 的 React hook，并在其中调用 getUsers라는 함수를 가져옵니다.

useEffect 钩子基本上管理功能组件中的副作用，它类似于 React 基于类的组件中使用的 componentDidMount() 수명주기 후크. 이 후크는 부작용 정리를 위한 두 번째 매개변수로 빈 배열을 허용합니다.

콘솔에서 응답 데이터를 검사할 수 있도록 아래와 같이 App 구성 요소의 코드를 업데이트하세요.

으아아아

콘솔을 확인하면 개체 출력이 표시됩니다. 이 개체를 열면 내부에 data，而在 data 里面，有一个名为 results라는 배열이라는 또 다른 개체가 있습니다.

결과에서 특정 값을 반환하려면 다음과 같이 axios.get 호출을 업데이트할 수 있습니다.

으아아아

여기서 결과 배열의 첫 번째 값 이름을 기록합니다.

5.결과 데이터 처리

이제 JavaScript에 내장된 map 메서드를 사용하여 배열의 각 요소를 반복하고 새로운 구조를 가진 새로운 JavaScript 개체 배열을 생성해 보겠습니다.

다음 코드로 getUsers 함수를 업데이트하세요.

으아아아

위 코드에서는 newData라는 변수를 만들었습니다. newData 的变量。它存储使用 map 方法查看 response.data.results 数组的结果。在 map 回调中，我们将数组的每个元素引用为 result （注意单数/复数差异）。此外，通过使用数组中每个对象的键值对，我们使用 name 和 id 메서드를 사용하여 response.data.results 배열을 본 결과를 저장합니다. map 콜백에서는 배열의 각 요소를 결과로 참조합니다(단수형/복수형 차이점 참고). 또한 배열의 각 개체에 대한 키-값 쌍을 사용하여 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!