使用 Hooks 将服务器数据传递到 React 组件

2020-05-13 08:00:00 · 飞浪

介绍在大多数React应用中，UI需要通过API从服务器接收数据。在本指南中，我将向您展示如何使用Reacthooks将API响应数据传递到您的组件中。以下是显示用户列表的组件示例：

介绍

在大多数 React 应用中，UI 需要通过 API 从服务器接收数据。在本指南中，我将向您展示如何使用 React hooks 将 API 响应数据传递到您的组件中。

以下是显示用户列表的组件示例：

      import React from 'react';

export default function App() {
  const [users, usersSet] = React.useState([]);
  return (
    <div>
      <ul>{users}</ul>
    </div>
  );
}
    

使用useState钩子创建变量，用于保存用户列表并更新同一用户列表（使用usersSet）。现在您需要从服务器获取用户并将其显示在组件中。一种方法是直接在组件中使用useEffect钩子。

useEffect 钩子

当某些变量或属性发生变化时，应该使用useEffect钩子，您需要更新组件以反映该变化。变化可能是对 API 的异步请求或任何其他副作用。useEffect接受两个参数：一个回调函数和一个依赖项数组。依赖项数组将由useEffect钩子监视的变量组成。当任何依赖项更改回调中的代码时，该函数将执行。如果依赖项数组为空，则回调函数将仅在组件安装时执行一次。

      React.useEffect(() => {
  async function fetchUsers() {
    ...
    usersSet(response);
  }

  fetchUsers();
}, []) // An empty array means the callback will only execute once


React.useEffect(() => {
  async function fetchUsers() {
    ...
    usersSet(response);
  }

  if (isLoggedIn) {
    fetchUsers();
  }
}, [isLoggedIn]) // The callback will execute every time isLoggedIn changes.
    

从服务器获取用户

要使用用户列表填充组件，您需要从 API 中获取用户。请使用reqres API 来完成此任务。

      export default function App() {
  const [users, usersSet] = React.useState([]);

  React.useEffect(() => {
    async function fetchUsers() {
      const fullResponse = await fetch('https://reqres.in/api/users');
      const responseJson = await fullResponse.json();
      usersSet(responseJson.data);
    }

    fetchUsers();
  }, []);

  return (
    <div>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <h3>
              {user.first_name} {user.last_name}
            </h3>
            <p>{user.email}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}
    

在上面的例子中，fetchUsers调用只会发生一次，因为它没有在依赖项数组中列出任何变量。它还会在组件中显示用户的名字、姓氏和电子邮件。

将用户传递给多个组件

如果您需要与其他组件共享相同的fetchUser功能，则可以将useEffect代码移到自定义钩子中。创建自定义钩子相对简单。您需要一个名称前面带有use字样的函数。例如：

      // usersHook.js

const useUsers = () => {};

export default useUsers;

Hooks 只适用于功能组件。它们不适用于类组件。

现在，您可以将钩子逻辑从App组件移出并移到useUsers钩子中。

      const useUsers = () => {
  // 1
  const [users, usersSet] = React.useState([]);

  React.useEffect(() => {
    async function fetchUsers() {
      const fullResponse = await fetch('https://reqres.in/api/users');
      const responseJson = await fullResponse.json();
      usersSet(responseJson.data);
    }

    fetchUsers();
  }, []);

  // 2
  return [users];
};
    

在此示例中，useState和useEffect代码刚刚移至自定义钩子中。此代码将像在App组件内部一样运行。
这里返回了一个包含用户对象的数组。返回数组不是必需的。您可以返回一个对象return { users }或仅返回用户对象return users。返回数组可能会让其他开发人员更容易发现有状态对象。数组是从useState钩子返回的结构，其中索引 0 处的对象是数据，索引 1 处的对象是更新程序函数。在您的自定义钩子中，您可以随意返回数据。

剩下的就是更新App组件以使用自定义钩子：

      import useUsers from './usersHook';

export default function App() {
  const [users] = useUsers();

  return (
    <div className='App'>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            <h3>
              {user.first_name} {user.last_name}
            </h3>
            <p>{user.email}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}
    

结论

您已经学习了如何从服务器获取数据并使用 React 的内置钩子来更新组件。您还学习了如何创建自定义钩子以在其他组件中重复使用您的获取逻辑。有关钩子的更多信息，请查看本指南。

感谢您的阅读并祝您下一个项目好运！

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

React框架

阅读全文

使用 Hooks 将服务器数据传递到 React 组件

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

React.useEffect(() => { async function fetchUsers() { ... usersSet(response); } fetchUsers(); }, []) // An empty array means the callback will only execute once React.useEffect(() => { async function fetchUsers() { ... usersSet(response); } if (isLoggedIn) { fetchUsers(); } }, [isLoggedIn]) // The callback will execute every time isLoggedIn changes.

export default function App() { const [users, usersSet] = React.useState([]); React.useEffect(() => { async function fetchUsers() { const fullResponse = await fetch('https://reqres.in/api/users'); const responseJson = await fullResponse.json(); usersSet(responseJson.data); } fetchUsers(); }, []); return ( <div> <ul> {users.map((user) => ( <li key={user.id}> <h3> {user.first_name} {user.last_name} </h3> <p>{user.email}</p> </li> ))} </ul> </div> ); }

const useUsers = () => { // 1 const [users, usersSet] = React.useState([]); React.useEffect(() => { async function fetchUsers() { const fullResponse = await fetch('https://reqres.in/api/users'); const responseJson = await fullResponse.json(); usersSet(responseJson.data); } fetchUsers(); }, []); // 2 return [users]; };

import useUsers from './usersHook'; export default function App() { const [users] = useUsers(); return ( <div className='App'> <ul> {users.map((user) => ( <li key={user.id}> <h3> {user.first_name} {user.last_name} </h3> <p>{user.email}</p> </li> ))} </ul> </div> ); }