React JS表格无法按状态字段正确过滤数据的问题如何解决？

问题原因 #

• 当前代码的核心问题是直接用setData覆盖了存储全量原始数据的状态，第一次筛选完成后data中就仅包含选中状态的条目，再次切换筛选条件时自然无法匹配到其他状态的数据，导致表格为空。
• 正确的做法是不修改原始数据源，单独新增一个状态存储当前选中的筛选条件，渲染表格时动态对原始数据做过滤。

修复后的完整代码 #

import React, { useState } from "react";
const initialData = [
  {
    id: 1,
    name: "Mayank Kumar",
    email: "mayankkumar@gmail.com",
    status: "Active",
  },
  {
    id: 2,
    name: "Jitender Kumar",
    email: "jitenderskumar@gmail.com",
    status: "Inactive",
  },
];

const TableDemo = () => {
  // 保留原始数据不修改
  const [data] = useState(initialData);
  // 新增状态存储当前选中的筛选状态，默认空值代表展示全部数据
  const [filterStatus, setFilterStatus] = useState("");

  // 渲染前基于筛选条件动态过滤数据
  const showData = filterStatus 
    ? data.filter(item => item.status === filterStatus)
    : data;

  return (
    <div>
      <table>
        <thead>
          <tr>
            <th style={{ textAlign: "center" }}>No.</th>
            <th style={{ textAlign: "center" }}>Name</th>
            <th style={{ textAlign: "center" }}>Email</th>
            <th style={{ textAlign: "center" }}>Status</th>
          </tr>
        </thead>
        <tbody>
          {showData.map((item, index) => {
            return (
              <tr key={item.id}>
                <th scope="row">{index + 1}</th>
                <td>{item.name}</td>
                <td>{item.email}</td>
                <td>{item.status}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
      <label>Status:</label>
      <button onClick={() => setFilterStatus("Active")}>Active</button>
      <button onClick={() => setFilterStatus("Inactive")}>Inactive</button>
      {/* 可选添加全部按钮，不需要可直接删除 */}
      <button onClick={() => setFilterStatus("")}>全部</button>
    </div>
  );
};

export default TableDemo;

修改说明 #

• 原来的data状态只用来存储全量原始数据，不再做修改
• 新增filterStatus状态记录当前选中的筛选条件
• 渲染表格时用showData变量做动态过滤，不会影响原始数据，切换筛选条件时永远基于全量数据做匹配，不会出现空表的问题
• 额外可选增加了「全部」按钮，点击可以展示所有状态的数据，不需要直接删除对应代码即可

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