精通React/Next.js数据筛选：实现URL查询参数的叠加与管理

// utils/queryParams.js (或者直接在组件内定义)
import { useRouter, usePathname, useSearchParams } from 'next/navigation'; // 适用于 Next.js App Router
// import { useRouter } from 'next/router'; // 适用于 Next.js Pages Router

/**
 * 更新或添加URL查询参数的通用函数。
 * @param {Object} newParams - 包含要更新或添加的查询参数的对象。
 *                             如果参数值为 ''、null 或 undefined，则该参数将被移除。
 */
export function useQueryParamsUpdater() {
  const router = useRouter();
  const pathname = usePathname(); // 获取当前路径，不包含查询参数
  const searchParams = useSearchParams(); // 获取当前所有查询参数的只读对象

  const updateQueryParams = (newParams) => {
    const currentParams = new URLSearchParams(searchParams.toString()); // 创建一个可变的URLSearchParams对象

    // 合并新参数，并处理移除逻辑
    Object.entries(newParams).forEach(([key, value]) => {
      if (value === '' || value === null || value === undefined) {
        currentParams.delete(key); // 如果值为无效，则移除该参数
      } else {
        currentParams.set(key, String(value)); // 设置或更新参数
      }
    });

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

    // 推送新的URL
    router.push(newUrl);
  };

  return updateQueryParams;
}

// components/common/Search.jsx
import React, { useState, useEffect } from "react";
import { XMarkIcon } from "@heroicons/react/24/outline";
import { useSearchParams } from 'next/navigation'; // 适用于 App Router
import { useQueryParamsUpdater } from '../../utils/queryParams'; // 导入自定义钩子

export default function Search() {
  const searchParams = useSearchParams();
  const initialSearch = searchParams.get('search') || ''; // 从URL获取初始搜索值
  const [searchQuery, setSearchQuery] = useState(initialSearch);
  const updateQueryParams = useQueryParamsUpdater();

  // 确保当URL中的search参数变化时，组件的state也能同步更新
  useEffect(() => {
    setSearchQuery(searchParams.get('search') || '');
  }, [searchParams]);

  const handleInputChange = (e) => {
    const value = e.target.value;
    setSearchQuery(value);
    // 调用通用函数，只更新 'search' 参数
    updateQueryParams({ search: value });
  };

  const cleanSearch = (e) => {
    e.preventDefault();
    setSearchQuery("");
    // 调用通用函数，将 'search' 参数设置为空，从而移除它
    updateQueryParams({ search: '' });
  };

  return (
    <div className="relative">
      {/* ... 其他UI元素 ... */}
      <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 right-2.5 bottom-2.5 rounded-lg px-4 py-2 text-sm font-medium text-slate-900 hover:bg-slate-200 focus:outline-none focus:ring-4 focus:ring-slate-300"
        >
          <XMarkIcon className="h-5 w-5" />
        </button>
      )}
    </div>
  );
}

// components/common/Selector.jsx
import React, { useState, useEffect } from "react";
import { useSearchParams } from 'next/navigation';
import { useQueryParamsUpdater } from '../../utils/queryParams';

export default function Selector({ label, data }) {
  const searchParams = useSearchParams();
  const updateQueryParams = useQueryParamsUpdater();

  // 根据 label 动态获取对应的 URL 参数
  const paramKey = label.toLowerCase(); // 例如 'category' 或 'price'
  const initialValue = searchParams.get(paramKey) || '';
  const [selectedValue, setSelectedValue] = useState(initialValue);

  // 确保当URL中的参数变化时，组件的state也能同步更新
  useEffect(() => {
    setSelectedValue(searchParams.get(paramKey) || '');
  }, [searchParams, paramKey]);

  const handleSelectChange = (e) => {
    const value = e.target.value;
    setSelectedValue(value);
    // 动态更新对应的查询参数
    updateQueryParams({ [paramKey]: value });
  };

  return (
    <div className="relative">
      <label htmlFor={paramKey} className="sr-only">{label}</label>
      <select
        id={paramKey}
        className="block w-full rounded-lg border border-slate-300 bg-slate-50 p-4 text-sm text-slate-900 focus:border-blue-500 focus:ring-blue-500"
        value={selectedValue}
        onChange={handleSelectChange}
      >
        <option value="">{`All ${label}`}</option>
        {data.map((item) => (
          <option key={item.value} value={item.value}>
            {item.label}
          </option>
        ))}
      </select>
    </div>
  );
}