Remix Run中组件动态数据加载：巧用URL参数驱动Loader实现搜索功能

// app/components/SearchBar.tsx
import { useSubmit } from "@remix-run/react";
import React, { useState, useEffect } from "react";

export function SearchBar() {
  const submit = useSubmit();
  const [searchValue, setSearchValue] = useState("");

  // 可以选择添加防抖，以避免每次按键都触发请求
  useEffect(() => {
    const handler = setTimeout(() => {
      // 只有当搜索值不为空时才提交，或者根据需求调整
      if (searchValue.length > 0 || searchValue === "") {
        const formData = new FormData();
        formData.set("search", searchValue);
        // replace: true 确保浏览器历史记录中不会堆积过多的搜索状态
        submit(formData, { replace: true });
      }
    }, 300); // 300ms 防抖

    return () => {
      clearTimeout(handler);
    };
  }, [searchValue, submit]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setSearchValue(e.currentTarget.value);
  };

  return (
    <input
      type="text"
      placeholder="搜索商品..."
      value={searchValue}
      onChange={handleChange}
    />
  );
}

// app/routes/products.tsx
import { json, LoaderFunctionArgs } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import { SearchBar } from "~/components/SearchBar"; // 导入搜索组件

// 假设有一个函数用于从数据库获取商品
// import { getProductsFromDB } from "~/utils/db.server";

// 模拟一个数据库查询函数
async function getProductsFromDB(searchTerm?: string | null) {
  const allProducts = [
    { id: 1, name: "Apple iPhone 15" },
    { id: 2, name: "Samsung Galaxy S24" },
    { id: 3, name: "Google Pixel 8" },
    { id: 4, name: "MacBook Air M3" },
    { id: 5, name: "iPad Pro M4" },
    { id: 6, name: "Apple Watch Series 9" },
  ];

  if (!searchTerm) {
    return allProducts;
  }

  const lowerCaseSearchTerm = searchTerm.toLowerCase();
  return allProducts.filter(product =>
    product.name.toLowerCase().includes(lowerCaseSearchTerm)
  );
}


export async function loader({ request }: LoaderFunctionArgs) {
  const url = new URL(request.url);
  const searchTerm = url.searchParams.get("search");

  // 根据searchTerm查询数据库
  const products = await getProductsFromDB(searchTerm);

  return json({ products, searchTerm });
}

export default function ProductsPage() {
  const { products, searchTerm } = useLoaderData<typeof loader>();

  return (
    <div>
      <h1>商品列表</h1>
      {/* 将搜索栏组件放置在任何你想要的地方，例如头部 */}
      <SearchBar />

      {searchTerm && <p>正在搜索: "{searchTerm}"</p>}

      <ul>
        {products.length > 0 ? (
          products.map((product: any) => (
            <li key={product.id}>{product.name}</li>
          ))
        ) : (
          <li>没有找到商品。</li>
        )}
      </ul>
    </div>
  );
}