【Next.js 项目实战系列】08-数据处理

本文链接：https://blog.csdn.net/qq_54869075/article/details/143034154

原文链接

CSDN 的排版/样式可能有问题，去我的博客查看原文系列吧，觉得有用的话，给我的库点个star，关注一下吧

上一篇【Next.js 项目实战系列】07-分配 Issue 给用户

数据处理

筛选

添加筛选按钮

# /app/issues/IssueStatusFilter.tsx

"use client";
import { Status } from "@prisma/client";
import { Select } from "@radix-ui/themes";

// 将所有可选值存储到外置 const 里
const statuses: { label: string; value?: Status }[] = [
  { label: "All" },
  { label: "Open", value: "OPEN" },
  { label: "In Progress", value: "IN_PROGRESS" },
  { label: "Closed", value: "CLOSED" },
];

const IssueStatusFilter = () => {
  return (
    <Select.Root defaultValue=" ">
      <Select.Trigger placeholder="Filter by status..." />
      <Select.Content>
        {statuses.map((status) => (
          <Select.Item key={status.value} value={status.value || " "}>
            {status.label}
          </Select.Item>
        ))}
      </Select.Content>
    </Select.Root>
  );
};
export default IssueStatusFilter;

最终效果如下:

Filtering Button

添加筛选参数

在刚刚的 IssueStatusFilter 中，为 Selet 添加 OnValueChage，使得在选项改变时，跳转至添加参数的页面 /issues?status=

# /app/issues/IssueStatusFilter.tsx

  ...
+ import { useRouter } from "next/navigation";
  ...
  const IssueStatusFilter = () => {
+   const router = useRouter();
+   const setStatusFilter = (status: string) => {
+     if (status === "All") {
+       router.push("/issues");
+       return;
+     }
+     const query = status ? `?status=${status}` : "";
+     router.push("/issues" + query);
+   };

    return (
+     <Select.Root defaultValue="All" onValueChange={setStatusFilter}>
        ...
      </Select.Root>
    );
  };
  export default IssueStatusFilter;