使用自定义 Hook 在 React 组件间传递数据-js教程-PHP中文网

使用自定义 Hook 在 React 组件间传递数据

霞舞

发布： 2025-09-27 19:35:00

原创

311人浏览过

使用自定义 hook 在 react 组件间传递数据

本文将介绍如何使用自定义 Hook 在 React 组件之间传递数据，尤其是在使用 React Router 进行页面跳转时。通过自定义 Hook，我们可以更有效地管理和共享数据，避免在不同组件中重复获取数据，提高代码的可维护性和可重用性。本文将提供详细的代码示例，并解释如何将数据传递到使用 React Router 创建的详情页。

创建自定义 Hook

首先，创建一个名为 useCountry 的自定义 Hook，用于获取国家数据。这个 Hook 可以接收一个国家代码作为参数，并返回对应的数据。

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

function useCountry(countryCode) {
  const [country, setCountry] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      setLoading(true);
      try {
        const response = await fetch(`https://restcountries.com/v3.1/alpha/${countryCode}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setCountry(data[0]); // Assuming the API returns an array
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    }

    if (countryCode) {
      fetchData();
    }
  }, [countryCode]);

  return { country, loading, error };
}

export default useCountry;

登录后复制

代码解释:

useState: 用于管理国家数据(country)，加载状态(loading)和错误信息(error)。
useEffect: 在组件挂载后或 countryCode 改变时，发起 API 请求。
fetchData: 异步函数，用于获取国家数据。
错误处理: 包含 try...catch...finally 块，用于处理 API 请求可能出现的错误，并在请求完成后设置 loading 为 false。
返回值: Hook 返回一个包含 country，loading 和 error 属性的对象。

在 Details 组件中使用 Hook

在 Details.js 组件中，使用 useCountry Hook 获取特定国家的数据。这里假设通过路由参数传递国家代码。

// Details.js
import React from 'react';
import { useParams } from 'react-router-dom';
import Navbar from './components/Navbar';
import useCountry from './useCountry';

function Details() {
  const { countryCode } = useParams(); // Get countryCode from route params
  const { country, loading, error } = useCountry(countryCode);

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

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

  if (!country) {
    return <p>Country not found</p>;
  }

  return (
    <>
      <Navbar />
      <h1>Details</h1>
      <div>
        <h2>{country.name.common}</h2>
        <p>Population: {country.population}</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/9442">
                            <img src="https://img.php.cn/upload/webcode/000/000/006/175897800582561.jpg" alt="瑞志企业建站系统(ASP版)2.2">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/9442">瑞志企业建站系统(ASP版)2.2</a>
                            <p>支持模板化设计，基于标签调用数据 支持N国语言，并能根据客户端自动识别当前语言 支持扩展现有的分类类型，并可修改当前主要分类的字段 支持静态化和伪静态 会员管理功能，询价、订单、收藏、短消息功能 基于组的管理员权限设置 支持在线新建、修改、删除模板 支持在线管理上传文件 使用最新的CKEditor作为后台可视化编辑器 支持无限级分类及分类的移动、合并、排序 专题管理、自定义模块管理 支持缩略图和图</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="瑞志企业建站系统(ASP版)2.2">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/9442" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="瑞志企业建站系统(ASP版)2.2">
                        </a>
                    </div>
                
        {/* Display other country details here */}
      </div>
    </>
  );
}

export default Details;

登录后复制

代码解释:

useParams: 从 React Router 获取路由参数，这里假设路由参数名为 countryCode。
useCountry: 调用自定义 Hook，传入 countryCode，获取国家数据。
条件渲染: 根据 loading，error 和 country 的值，渲染不同的内容。

修改路由配置

确保路由配置正确，允许传递国家代码作为参数。

// main.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Details from './Details';

const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
  },
  {
    path: '/details/:countryCode', // Add countryCode as a parameter
    element: <Details />,
  },
]);

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);

登录后复制

代码解释:

/details/:countryCode: 定义路由，允许通过 :countryCode 传递国家代码作为参数。

修改 Country 组件

修改 Country.js 组件，使其传递正确的国家代码到 Details 页面。

// Country.js
import React from 'react';
import { Link } from 'react-router-dom';

function Country(props) {
  const { data, img, cap, reg, alt, name, pop } = props;
  const countryCode = data.cca2; // Assuming cca2 is the country code

  return (
    <Link to={`/details/${countryCode}`}>
      <div className="w-72 h-80 shadow bg-white rounded-sm mx-auto cursor-pointer">
        @@##@@
        <div className="pt-3 pl-4">
          <h3 className="font-extrabold pb-2 pt-1 text-darkBlue">{name}</h3>
          <p className="text-sm text-darkBlue font-bold">
            population:
            <span className="text-lightDarkGray font-normal">{pop}</span>
          </p>
          <p className="text-sm text-darkBlue font-bold">
            region:
            <span className="text-lightDarkGray font-normal">{reg}</span>
          </p>
          <p className="text-sm text-darkBlue font-bold">
            capital:
            <span className="text-lightDarkGray font-normal">{cap}</span>
          </p>
        </div>
      </div>
    </Link>
  );
}

export default Country;

登录后复制

代码解释: