Next.js本地过滤表格数据：基于EmpName实现无API调用搜索

你可以通过以下步骤实现仅在前端过滤已渲染的员工数据，无需调用API：

1. 添加过滤逻辑
   在Page组件中，使用useMemo创建过滤后的员工数组，这样只会在原始数据emps或搜索关键词searchString变化时重新计算，避免不必要的重渲染：

const filteredEmps = useMemo(() => {
  if (!emps) return [];
  // 统一转为小写，实现大小写不敏感的搜索
  const searchTerm = searchString.toLowerCase();
  return emps.filter(emp => 
    emp.emp_name.toLowerCase().includes(searchTerm)
  );
}, [emps, searchString]);

2. 替换表格数据源
   将表格主体渲染时使用的数据源从(emps || [])替换为上面定义的filteredEmps：

<Tbody>
  {filteredEmps.map((emp) => (
    <Tr key={emp.id}>
      {tableHeaders.map((header) => (
        <Td
          key={`${emp.id}_${header.key}`}
          whiteSpace="nowrap"
          maxWidth={300}
          overflow="hidden"
          textOverflow="ellipsis"
        >
          {emp[header.key]}
        </Td>
      ))}
    </Tr>
  ))}
</Tbody>

3. 确认SearchInput的回调正确性
   确保你的SearchInput组件正确将输入值传递给onChange回调。如果是基于原生input封装的组件，回调应该接收输入值：

// 示例：SearchInput内部的onChange处理
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  onChange(e.target.value);
};

完整修改后的核心代码 #

export default function Page() {
  const [searchString, setSearchString] = useState("");

  const { data: emps, isLoading } = useSWR<Employee[]>(
    "/api/emp/list",
    fetcher
  );
  // 新增过滤逻辑
  const filteredEmps = useMemo(() => {
    if (!emps) return [];
    const searchTerm = searchString.toLowerCase();
    return emps.filter(emp => 
      emp.emp_name.toLowerCase().includes(searchTerm)
    );
  }, [emps, searchString]);

  const tableHeaders: empColumn[] = useMemo(() => {
    return [
     // 你的表头数据
    ];
  }, []);

  return (
    <>
      <Stack spacing={6}>
        <Flex justifyContent="space-between" columnGap={3}>
          <Heading size="lg">Employees</Heading>
          <HStack spacing={3}>
            <SearchInput
              width={280}
              value={searchString}
              onChange={setSearchString}
            />
          </HStack>
        </Flex>
        {isLoading ? (
          <Center>
            <Spinner />
          </Center>
        ) : (
          <TableContainer>
            <Table size="sm" mt="10">
              <Thead>
                <Tr>
                  {tableHeaders.map((header) => (
                    <Td key={header.key}>{header.title}</Td>
                  ))}
                </Tr>
              </Thead>
              <Tbody>
                {/* 使用过滤后的数据源 */}
                {filteredEmps.map((emp) => (
                  <Tr key={emp.id}>
                    {tableHeaders.map((header) => (
                      <Td
                        key={`${emp.id}_${header.key}`}
                        whiteSpace="nowrap"
                        maxWidth={300}
                        overflow="hidden"
                        textOverflow="ellipsis"
                      >
                        {emp[header.key]}
                      </Td>
                    ))}
                  </Tr>
                ))}
              </Tbody>
            </Table>
          </TableContainer>
        )}
      </Stack>
    </>
  );
}

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