Next.js中如何通过下拉菜单实现数据筛选功能？

场景：通过Prisma从MSSQL获取数据到Next.js，尝试用下拉菜单实现省份筛选，数据能正常展示，但筛选功能无效。

原代码核心问题：

• 冗余维护filterInterviews状态，导致筛选逻辑与状态更新不同步
• handleProvinceFilter仅处理"全部"选项，未实现其他省份的筛选逻辑
• 未给provinceFilter设置初始默认值，初始筛选逻辑异常
• 表格渲染旧状态数据，而非实时计算的筛选结果

修复方案 #

1. 移除冗余状态：删掉filterInterviews状态，直接基于原始interviews和provinceFilter实时计算筛选结果，避免状态不同步
2. 简化筛选逻辑：handleProvinceFilter仅负责更新筛选条件，筛选逻辑交给渲染时的实时计算
3. 设置默认筛选值：给provinceFilter初始值设为"all"，确保页面加载时显示全部数据
4. 渲染实时结果：表格中渲染计算后的筛选数据，而非旧状态

修改后的完整代码 #

import Head from "next/head";
import { PrismaClient } from "@prisma/client";
import { NavBar } from "../../components/Layouts/NavBar";
import provs from "../../assets/prov.json";
import { useState } from "react";

const prisma = new PrismaClient();

export async function getServerSideProps() {
  const interviews = await prisma.sdesmain.findMany();
  return { props: { interviews } };
}

export default function Checkin({ interviews }) {
  // 设置默认值为"all"，初始显示全部数据
  const [provinceFilter, setProvinceFilter] = useState("all");

  const handleProvinceFilter = (e) => {
    // 仅更新筛选条件，筛选逻辑在渲染时实时计算
    setProvinceFilter(e.target.value);
  };

  // 实时计算筛选结果
  const filteredInterviews = provinceFilter === "all"
    ? interviews
    : interviews.filter(interview => interview.a01_province === provinceFilter);

  return (
    <div>
      <NavBar />
      <div className="container mx-auto">
        <div>
          <h1 className="text-3xl font-bold">Interviews checkin</h1>
        </div>
        <div className="flex flex-col py-6">
          <select
            className="bg-gray-200 rounded-md p-2 max-w-md"
            onChange={handleProvinceFilter}
            // 绑定选中值与state，保持同步
            value={provinceFilter}
          >
            <option value="all">All</option>
            {provs.map((prov) => (
              <option value={prov.id} key={prov.id}>
                {prov.provinceName}
              </option>
            ))}
          </select>
        </div>
      </div>
      <div className="container mx-auto">
        <h1>Interviews by Household / Cluster </h1>
        <div className="overflow-x-auto relative ">
          <table className="table-auto w-full text-sm text-left text-gray-800 dark:text-gray-800 ">
            <thead>
              <tr>
                <th>Province Code</th>
                <th>Cluster Number</th>
                <th>Household Sample Number</th>
              </tr>
            </thead>
            <tbody>
              {/* 渲染实时计算的筛选结果 */}
              {filteredInterviews.map((interview) => (
                <tr key={interview.interview_key}>
                  <td>{interview.a01_province}</td>
                  <td>{interview.a02_clusterNumber}</td>
                  <td>{interview.a06_hhsampleNumber}</td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Billy Somers