如何基于不同条件映射数组元素，优化React表格行背景色渲染逻辑

我有一个字典数组，每个字典代表UI上表格的一行，每行需满足两个条件之一，根据条件设置两种背景色选项之一。我当前的解决方案是分析状态并拆分为不同数组，然后分别映射这两个数组以设置不同背景色。但我并不满意该方案，因为存在代码重复问题，且会阻碍后续实现全局搜索功能。请问是否有人能提出一个可直接处理整个状态、返回对应背景色行的map函数？

当前代码：

const TsdzList = (props) => {
    // all dicts to map
    const [testPackagesList, setTestPackagesList] = useState([]);

    // rows that respect cdt1
    const [newTestPackages, setNewTestPackages] = useState([]);

    // rows that respect cdt2
    const [oldTestPackages, setOldTestPackages] = useState([]);

    const getNewTestPackages = () => {
        let tsdzNewTestPackageNames = [];
        let tsdzOldTestPackageNames = [];
        for (const dict of testPackagesList) {
            if (condition1) {
                tsdzNewTestPackageNames.push(dict);
            }
            if (condition2) {
                tsdzOldTestPackageNames.push(dict);
            }
        }
        setNewTestPackages(tsdzNewTestPackageNames);
        setOldTestPackages(tsdzOldTestPackageNames);
    };
    return (
                                           
            <Table size="small">
              <TableHead>
                <TableRow>
                    <TableCell>ID</TableCell>
                    <TableCell>data</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                  {newTestPackages.map((report, index) => (
                    <TableRow>
                      <TableCell required>{report.id}</TableCell>
                      <TableCell>{report.data}</TableCell>
                    </TableRow>
                   ))}
                  {oldTestPackages.map((report, index) => (
                     <TableRow key={index}>
                        <TableCell required>{report.id}</TableCell>
                        <TableCell>{report.data}</TableCell>    
                     </TableRow>
                  ))}
                    </TableBody>
                </Table>            
            <Button
              sx={{ m: 2 }}
              onClick={() => {
              getNewTestPackages();
              }}
            variant="contained"
            >
                Show
            </Button>
    );
};

从代码中可以看出，两个映射函数的唯一区别是背景色。是否可以仅使用一个类似{testPackagesList.map((report, index) => (的map函数，同时移除Show按钮，改为在testPackagesList填充完成后自动进行条件分析？

完全可以直接遍历原数组testPackagesList，在遍历过程中根据条件判断行的背景色，同时去掉拆分数组的冗余逻辑和手动触发的Show按钮，改为自动处理。

修改后的代码 #

const TsdzList = (props) => {
    const [testPackagesList, setTestPackagesList] = useState([]);

    // 封装背景色判断逻辑
    const getRowBackgroundColor = (item) => {
        if (condition1) {
            return '#e8f5e9'; // 替换为你需要的新行背景色
        }
        if (condition2) {
            return '#fff3e0'; // 替换为你需要的旧行背景色
        }
        return 'transparent'; // 默认背景色
    };

    return (
        <>
            <Table size="small">
                <TableHead>
                    <TableRow>
                        <TableCell>ID</TableCell>
                        <TableCell>data</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {testPackagesList.map((report, index) => (
                        <TableRow 
                            key={index} 
                            sx={{ backgroundColor: getRowBackgroundColor(report) }}
                        >
                            <TableCell required>{report.id}</TableCell>
                            <TableCell>{report.data}</TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </>
    );
};

关键优化点 #

• 消除代码重复：只用一个map遍历原数组，避免拆分两个数组后重复编写渲染逻辑
• 自动触发更新：去掉getNewTestPackages函数和Show按钮，只要testPackagesList数据更新，表格会自动重新渲染并应用对应背景色
• 兼容后续扩展：原数组保持完整，不会干扰全局搜索等功能的实现——搜索时只需过滤原数组，渲染逻辑无需改动
• 提升可维护性：背景色判断逻辑封装到单独函数中，后续调整条件或颜色只需修改这个函数

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