Remix Run 组件中利用 URL 参数与 Loader 实现动态数据获取

import { useSubmit } from "@remix-run/react";
import React from "react";

function SearchInputComponent() {
  const submit = useSubmit();

  const handleSearchChange = (event) => {
    const searchValue = event.currentTarget.value;

    // 创建一个 FormData 对象来模拟表单提交
    const formData = new FormData();
    formData.set("search", searchValue); // 设置名为 'search' 的参数

    // 使用 submit 函数更新 URL
    // replace: true 确保浏览器历史记录不会堆积过多的搜索状态
    submit(formData, { replace: true });
  };

  return (
    <input
      type="text"
      placeholder="搜索..."
      onChange={handleSearchChange}
      // 可以添加 defaultValue 或 value 属性来保持输入框状态
      // 例如：defaultValue={searchParams.get("search") || ""}
    />
  );
}

export default SearchInputComponent;

import type { LoaderFunctionArgs } from "@remix-run/node";
import { json } from "@remix-run/node";
import { useLoaderData, useSearchParams } from "@remix-run/react"; // 引入 useSearchParams
import React, { useRef, useEffect } from "react"; // 引入 React 钩子

// 假设这是你的路由文件，例如 app/routes/items.tsx
export const loader = async ({ request }: LoaderFunctionArgs) => {
  const url = new URL(request.url);
  const searchTerm = url.searchParams.get("search"); // 获取 'search' 参数的值

  let items = [];
  if (searchTerm) {
    // 根据 searchTerm 从数据库或API获取数据
    // 这是一个示例，实际中你会调用你的数据层
    items = await fetchDataFromDatabase(searchTerm);
  } else {
    // 如果没有搜索词，可能加载所有数据或空数据
    items = await fetchAllItems();
  }

  return json({ items, searchTerm });
};

// 假设的异步数据获取函数
async function fetchDataFromDatabase(query: string) {
  console.log(`正在根据 "${query}" 搜索数据...`);
  // 模拟异步数据获取
  return new Promise(resolve => setTimeout(() => {
    const data = [
      { id: 1, name: "Apple" },
      { id: 2, name: "Banana" },
      { id: 3, name: "Orange" },
      { id: 4, name: "Grape" },
    ];
    resolve(data.filter(item => item.name.toLowerCase().includes(query.toLowerCase())));
  }, 500));
}

async function fetchAllItems() {
  console.log("正在获取所有数据...");
  return new Promise(resolve => setTimeout(() => {
    resolve([
      { id: 1, name: "Apple" },
      { id: 2, name: "Banana" },
      { id: 3, name: "Orange" },
      { id: 4, name: "Grape" },
    ]);
  }, 500));
}

// 改造 SearchInputComponent 以支持防抖和默认值
function SearchInputComponent() {
  const submit = useSubmit();
  const [searchParams] = useSearchParams(); // 获取当前 URL 的搜索参数
  const timerRef = useRef(null);

  const handleSearchChange = (event) => {
    const searchValue = event.currentTarget.value;

    // 清除之前的定时器
    if (timerRef.current) {
      clearTimeout(timerRef.current);
    }

    // 设置新的定时器，在 300ms 后提交
    timerRef.current = setTimeout(() => {
      const formData = new FormData();
      formData.set("search", searchValue);
      submit(formData, { replace: true });
    }, 300); // 300ms 防抖
  };

  // 确保组件卸载时清除定时器
  useEffect(() => {
    return () => {
      if (timerRef.current) {
        clearTimeout(timerRef.current);
      }
    };
  }, []);

  return (
    <input
      type="text"
      placeholder="搜索..."
      onChange={handleSearchChange}
      defaultValue={searchParams.get("search") || ""} // 设置默认值以保持状态
    />
  );
}


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

  return (
    <div>
      <h1>商品列表</h1>
      {/* 引入你的搜索组件 */}
      <SearchInputComponent />

      {searchTerm && <p>搜索结果 for: "{searchTerm}"</p>}
      <ul>
        {items.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}