在React/Next.js中实现持久化与更新数据过滤器的策略

// hooks/useQueryParamManager.js
"use client"; // 确保此Hook在客户端运行

import { useRouter, usePathname, useSearchParams } from 'next/navigation';
import { useCallback } from 'react';

/**
 * 自定义Hook，用于管理Next.js应用中的URL查询参数。
 * 提供了更新、添加和删除查询参数的功能，并自动进行URL导航。
 *
 * @returns {function(Object<string, string | number | null | undefined>): void} updateQueryParams 函数
 */
export function useQueryParamManager() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();

  /**
   * 更新URL中的查询参数。
   *
   * @param {Object<string, string | number | null | undefined>} newParams 一个对象，键值对表示要更新的参数。
   *   如果值为 null、undefined 或空字符串，则该参数将被从URL中删除。
   */
  const updateQueryParams = useCallback((newParams) => {
    // 基于当前的searchParams创建一个新的URLSearchParams实例
    const currentParams = new URLSearchParams(searchParams.toString());

    // 遍历传入的新参数，更新或删除它们
    Object.entries(newParams).forEach(([key, value]) => {
      if (value === null || value === undefined || String(value).trim() === '') {
        // 如果值为 null/undefined/空字符串，则删除该参数
        currentParams.delete(key);
      } else {
        // 否则，设置或更新该参数
        currentParams.set(key, String(value));
      }
    });

    // 构建新的查询字符串
    const queryString = currentParams.toString();
    // 构建新的完整URL
    const newUrl = queryString ? `${pathname}?${queryString}` : pathname;

    // 使用router.push进行导航，更新URL
    router.push(newUrl);
  }, [router, pathname, searchParams]); // 依赖项确保当router, pathname, searchParams变化时，函数重新创建

  return updateQueryParams;
}

// components/common/Search.js
"use client";

import React, { useState, useEffect } from "react";
import { XMarkIcon } from "@heroicons/react/24/outline";
import { useSearchParams } from 'next/navigation';
import { useQueryParamManager } from '../../hooks/useQueryParamManager'; // 引入自定义Hook

export default function Search() {
  const searchParams = useSearchParams();
  // 从URL读取初始搜索值，如果不存在则为空字符串
  const initialSearch = searchParams.get('search') || '';
  const [searchQuery, setSearchQuery] = useState(initialSearch);
  const updateQueryParams = useQueryParamManager(); // 使用自定义Hook

  // 确保组件内部状态与URL参数同步（例如，当用户通过浏览器前进/后退时）
  useEffect(() => {
    setSearchQuery(initialSearch);
  }, [initialSearch]);

  const handleInputChange = (e) => {
    const newValue = e.target.value;
    setSearchQuery(newValue);
    // 调用 updateQueryParams 更新 URL
    // 注意：在实际应用中，对于频繁输入的搜索框，通常会加入防抖（debounce）处理，
    // 以避免每次按键都触发路由更新。
    updateQueryParams({ search: newValue });
  };

  const cleanSearch = (e) => {
    e.preventDefault();
    setSearchQuery("");
    // 传入空字符串，将从URL中删除 'search' 参数
    updateQueryParams({ search: '' });
  };

  return (
    <div className="relative">
      <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
        {/* 搜索图标 */}
        <svg
          className="h-5 w-5 text-gray-500"
          aria-hidden="true"
          fill="currentColor"
          viewBox="0 0 20 20"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            fillRule="evenodd"
            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
            clipRule="evenodd"
          ></path>
        </svg>
      </div>
      <input
        type="search"
        id="default-search"
        className="block w-full rounded-lg border border-slate-300 bg-slate-50 p-4 pl-10 text-sm  placeholder-slate-400 focus:border-blue-500 focus:ring-blue-500"
        placeholder="Search AI tool or category"
        required
        value={searchQuery}
        onChange={handleInputChange}
      />
      {searchQuery && (
        <button
          type="button"
          onClick={cleanSearch}
          className="absolute inset-y-0 right-0 flex items-center pr-3"
          aria-label="Clear search"
        >
          <XMarkIcon className="h-5 w-5 text-gray-500" aria-hidden="true" />
        </button>
      )}
    </div>
  );
}

// components/common/Selector.js
"use client";

import React from 'react';
import { useSearchParams } from 'next/navigation';
import { useQueryParamManager } from '../../hooks/useQueryParamManager'; // 引入自定义Hook

export default function Selector({ label, data, paramKey }) {
  const updateQueryParams = useQueryParamManager();
  const searchParams = useSearchParams();
  // 从URL读取当前参数值
  const currentValue = searchParams.get(paramKey) || '';

  const handleChange = (e) => {
    const newValue = e.target.value;
    updateQueryParams({ [paramKey]: newValue });
  };

  return (
    <div>
      <label htmlFor={paramKey} className="sr-only">{label}</label>
      <select
        id={paramKey}
        value={currentValue}
        onChange={handleChange}
        className="block w-full rounded-lg border border-slate-300 bg-slate-50 p-4 text-sm text-slate-700 focus:border-blue-500 focus:ring-blue-500"
      >
        <option value="">All {label}</option> {/* 默认选项，用于清除该过滤器 */}
        {data.map((item) => (
          <option key={item.value} value={item.value}>
            {item.label}
          </option>
        ))}
      </select>
    </div>
  );
}

// components/Filters.js
"use client";

import React from "react";
import Search from "./common/Search";
import Selector from "./common/Selector";

export default function Filters({ tags, prices }) {
  return (
    <div className="mb-5 flex w-full grid-cols-4 flex-col gap-3 text-center text-base font-medium text-slate-700 md:grid">
      <Search className="col-span-2 w-full" />
      <Selector label="Category" data={tags} paramKey="tag" />
      <Selector label="Price" data={prices} paramKey="price" />
    </div>
  );
}