React类组件不硬编码恢复表格原始数据及filter方法优化咨询

问题1：首次过滤后无法匹配原始数据的修复 #

你当前的问题根源是每次过滤后直接覆盖了state中存储的原始表格数据，导致后续过滤只能在裁剪后的数据集上执行。修复方案如下：

1. 在state中新增originalTableData字段存储完整原始数据，永远不修改该字段，仅作为过滤的基准数据源
2. 每次点击搜索按钮时，都基于originalTableData执行过滤，将结果赋值给用于渲染的tableData字段

问题2：filter方法优雅改写 #

把需要匹配的字段统一存为数组，使用Array.some()方法判断是否存在任意字段匹配搜索关键词，避免重复写判断逻辑，后续新增搜索字段只需修改数组即可。

修改后的核心代码 #

Home组件修改部分 #

class Home extends Component {
    constructor(props) {
        super();
        // 原始数据单独存储，永远不修改
        const originalTableData = [
            {
                id: 1,
                name: "Aiden",
                position: "sdsdsd",
                office: "sdasds",
                age: 23,
                startDate: "13/22/223",
                salary: 12313,
            },
            {
                id: 2,
                name: "Ben",
                position: "sdsdsd",
                office: "sdasds",
                age: 23,
                startDate: "13/22/223",
                salary: 12313,
            },
            {
                id: 3,
                name: "Kyle",
                position: "sdsdsd",
                office: "sdasds",
                age: 23,
                startDate: "13/22/223",
                salary: 12313,
            },
            {
                id: 4,
                name: "Linda",
                position: "sdsdsd",
                office: "sdasds",
                age: 23,
                startDate: "13/22/223",
                salary: 12313,
            },
        ]
        this.state = {
            originalTableData,
            tableData: originalTableData, // 用于渲染的表格数据
            enterData: '', // 初始为空，默认显示全部数据
        };
    }

    updateSearch = () => {
        const { originalTableData, enterData } = this.state;
        const keyword = enterData.trim().toLowerCase();
        // 搜索关键词为空时直接返回全部原始数据
        if (!keyword) {
            this.setState({ tableData: originalTableData });
            return;
        }
        // 定义需要参与搜索的字段数组，后续新增字段直接在这里加
        const searchFields = ['name', 'position', 'office', 'age', 'salary', 'startDate'];
        const filteredData = originalTableData.filter(item => {
            // 只要有一个字段匹配就保留该条数据
            return searchFields.some(field => {
                return String(item[field]).toLowerCase().includes(keyword);
            })
        })
        this.setState({ tableData: filteredData });
    }

    // 其余代码保持不变
}

额外优化建议 #

Topbar组件中定义的state.input没有被实际使用，你直接把输入值通过props传给了父组件，可以删掉该冗余state减少不必要的内存占用。

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