React Hooks 中的数据请求

2023-11-05 15:21:04

React Hooks是一种强大的工具，它可以帮助您以函数式组件的方式来管理React状态和副作用。在本文中，我们将探究如何使用Hooks来请求数据。我们将使用流行的Hacker News API来获取科技界的热门文章。同时，您还将学习如何创建可复用且可作为独立包发布的自定义数据获取hook。

前置知识

在继续之前，您需要具备以下知识：

React基础知识
Hooks基础知识
REST API的概念

使用Hooks请求数据

现在，让我们开始使用Hooks来请求数据。首先，我们需要创建一个新的React项目。您可以使用create-react-app工具来轻松创建项目。

npx create-react-app my-app

项目创建完成后，您可以在src目录中找到App.js文件。我们将在这里编写我们的代码。

首先，我们需要导入必要的库。

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

现在，我们需要定义一个状态变量来存储我们从API获取的数据。

const [data, setData] = useState([]);

接下来，我们需要定义一个副作用函数来获取数据。

useEffect(() => {
  const fetchData = async () => {
    const response = await fetch('https://hacker-news.firebaseio.com/v0/topstories.json');
    const data = await response.json();
    setData(data);
  };

  fetchData();
}, []);

在上面的代码中，我们定义了一个名为fetchData的异步函数。该函数使用fetch API来获取Hacker News API的数据。然后，我们将获取到的数据设置到data状态变量中。

最后，我们需要在组件中渲染数据。

return (
  <div>
    {data.map((id) => (
      <p key={id}>{id}</p>
    ))}
  </div>
);

在上面的代码中，我们使用map方法来遍历data数组，并为每个元素渲染一个<p>元素。

现在，如果您运行您的项目，您将能够看到Hacker News API的数据在浏览器中显示。

创建自定义数据获取hook

现在，我们将创建一个可复用的自定义数据获取hook。这将使我们能够在应用程序的任何地方轻松获取数据。

首先，我们需要创建一个新的文件，例如useDataFetching.js。我们将在这里编写我们的hook。

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

const useDataFetching = (url) => {
  const [data, setData] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);

      try {
        const response = await fetch(url);
        const data = await response.json();
        setData(data);
      } catch (error) {
        setError(error.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
};

export default useDataFetching;

在上面的代码中，我们定义了一个名为useDataFetching的函数。该函数接受一个URL参数，并返回一个对象，该对象包含三个值：data、loading和error。

现在，我们可以在我们的组件中使用这个hook来获取数据。

import useDataFetching from './useDataFetching';

const App = () => {
  const { data, loading, error } = useDataFetching('https://hacker-news.firebaseio.com/v0/topstories.json');

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error}</p>;
  }

  return (
    <div>
      {data.map((id) => (
        <p key={id}>{id}</p>
      ))}
    </div>
  );
};

export default App;