React Hooks:将参数传递给自定义Hook以动态设置API请求查询

基础概念

React Hooks 是 React 16.8 版本引入的一个新特性，它允许你在函数组件中使用状态和其他 React 特性，而不需要编写类组件。自定义 Hook 是一种可以复用的函数，它使用其他 Hooks 来封装和共享逻辑。

类型

自定义 Hook 可以是任何函数，只要它使用至少一个 React Hook（如 useState、useEffect 等）。通过自定义 Hook，你可以封装任何逻辑，例如数据获取、状态管理、副作用处理等。

应用场景

当你需要在多个组件中复用相同的逻辑时，自定义 Hook 非常有用。例如，从 API 获取数据并在组件中使用这些数据的逻辑可以封装到一个自定义 Hook 中。

示例代码

以下是一个示例，展示如何创建一个自定义 Hook 来动态设置 API 请求查询参数：

import { useState, useEffect } from 'react';

// 自定义 Hook，用于从 API 获取数据
function useApiData(queryParam) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/data?query=${queryParam}`);
        const result = await response.json();
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [queryParam]); // 依赖项数组，当 queryParam 变化时重新获取数据

  return { data, loading, error };
}

// 使用自定义 Hook 的组件
function MyComponent({ queryParam }) {
  const { data, loading, error } = useApiData(queryParam);

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <div>
      <h1>Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}