在React中构建自己的自定义Hooks：获取数据的简单指南

liangshanbo1215

于 2024-10-08 18:40:03 发布

阅读量1.2k

点赞数 16

分类专栏： React 文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/liangshanbo1215/article/details/142760155

版权

React 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.介绍

在使用React时，管理状态和副作用（如获取数据）可能会变得重复，特别是如果您在多个组件中具有类似的逻辑。这就是自定义Hooks派上用场的地方。它们允许您将可重用的逻辑捆绑到单个函数中，使代码更清晰，更易于管理。

在本文章中，我们将创建一个名为useCountry的自定义Hooks，它从API获取有关国家的信息。我们将分解每个步骤，以确保您可以轻松地遵循。

2.什么是React Hook？

在我们开始自定义hook之前，让我们快速回顾一下React中的一些内置hook：

useState：可以将其视为一个容器，其中保存的信息可以随时间而更改，就像表单中的用户输入一样。

useEffect：这就像一个计时器，告诉React在发生某些事情后执行特定的操作，例如从服务器获取数据。

一个简单的例子

假设你正在构建一个简单的表单。您可以使用useState跟踪输入值（如购物清单），并使用useEffect在这些值更改时触发操作（如更新清单）。这些内置的Hooks是创建自定义Hooks的构建块，它允许您在不同的组件之间重用逻辑。

3.构建自定义Hook的分步指南

第一步：定义你的Hook的目的

我们将创建一个名为useCountry的自定义Hooks，它将根据您提供的名称获取国家/地区的详细信息。它将处理加载状态和可能发生的任何错误。挑战：想想定制Hooks的另一个用例。您想获取什么样的数据？

第二步：初始设置

我们将使用 **Axios ** 进行API调用。与Fetch API相比，Axios简化了发送请求的过程，并提供了更好的错误消息。下面是我们自定义Hooks的基本轮廓：

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

function useCountry(countryName) {
  const [data, setData] = useState(null); // Holds fetched country data
  const [loading, setLoading] = useState(true); // Tracks loading state
  const [error, setError] = useState(null); // Tracks errors

  useEffect(() => {
    if (!countryName) return; // If countryName is empty, exit early

    const fetchCountry = async () => {
      setLoading(true); // Start loading
      try {
        const response = await axios.get(`https://restcountries.com/v3.1/name/${countryName}`);
        setData(response.data[0]); // Set country data
      } catch (err) {
        setError(err.response ? err.response.data.message : err.message); // Handle errors
      } finally {
        setLoading(false); // End loading
      }
    };

    fetchCountry(); // Call the function to fetch data
  }, [countryName]); // Re-run if countryName changes

  return { data, loading, error }; // Return state
}

export default useCountry;

要点：

1、Axios自动转换JSON响应，因此您不必手动执行。

2、它提供了更好的错误消息，使调试更容易。

自己尝试：将代码复制到编辑器中，然后更改国家名称以查看不同的结果！

第三步：处理边界情况

管理边界情况至关重要-例如国家名称无效或为空时。以下是我们如何增强我们的Hooks：

useEffect(() => {
  if (!countryName) {
    setError('Country name is required'); // Set error if no input
    setLoading(false);
    return; // Exit if country name is empty
  }

  const fetchCountry = async () => {
    setLoading(true);
    try {
      const response = await axios.get(`https://restcountries.com/v3.1/name/${countryName}`);
      setData(response.data[0]);
    } catch (err) {
      setError(err.response ? err.response.data.message : err.message);
    } finally {
      setLoading(false);
    }
  };

  fetchCountry();
}, [countryName]);

示例场景：

无效的国家/地区名称：如果您输入“Atlantis”，API将返回404错误，我们可以捕获并显示该错误。

Empty Input：如果输入为空，我们将显示一条错误消息，指示需要输入国家/地区名称。

第四步：在组件中使用自定义Hook

现在我们有了useCountry Hooks，让我们在组件中使用它来获取和显示国家详细信息。

import React, { useState } from 'react';
import useCountry from './useCountry';

const CountryInfo = () => {
  const [country, setCountry] = useState(''); // State for country input
  const { data, loading, error } = useCountry(country); // Use custom hook

  const handleInputChange = (e) => {
    setCountry(e.target.value); // Update country state
  };

  return (
    <div>
      <input
        type="text"
        value={country}
        onChange={handleInputChange}
        placeholder="Enter country name"
      />
      {loading && <p>Loading...</p>} // Show loading message
      {error && <p>Error: {error}</p>} // Show error message
      {data && (
        <div>
          <h2>{data.name.common}</h2>
          <p>Population: {data.population}</p>
          <p>Region: {data.region}</p>
        </div>
      )}
    </div>
  );
};

export default CountryInfo;