MUIDataTable中map嵌套find时动态referal_id导致页面空白问题排查

问题根源 #

使用动态item.referal_id时页面空白，核心原因是：当数据中不存在匹配item.referal_id的agent_id条目时，find()方法会返回undefined，此时尝试访问undefined.name会抛出JavaScript运行时错误，导致React组件渲染失败，页面直接空白。

而使用静态值"C873"时，恰好能匹配到数据中的对应条目，find()返回有效对象，不会触发错误，因此页面正常渲染。

解决方案 #

1. 安全访问属性

在获取推荐人名称前，先判断find()的结果是否存在，可通过**可选链操作符?.**简化判断逻辑，同时建议使用全等运算符===替代==，避免类型转换带来的意外问题：

修改后的核心代码：

data.data.map((item, i) => (
    [
        item.name,
        // 先判断referal_id存在，再用可选链安全访问name属性
        item.referal_id ? data.data.find(o => o.agent_id === item.referal_id)?.name : '',
        item.referal_id,
        item.state
    ]
))

2. 优化性能（可选）

如果数据量较大，每次map都调用find()会造成重复遍历，性能较低。可以提前将数据转换为agent_id到对象的映射表，用O(1)的查找替代O(n)的遍历：

// 提前构建映射表，可放在组件渲染外部或用useMemo缓存
const agentMap = Object.fromEntries(data.data.map(agent => [agent.agent_id, agent]));

// 映射时直接查表
data.data.map((item, i) => (
    [
        item.name,
        item.referal_id ? agentMap[item.referal_id]?.name : '',
        item.referal_id,
        item.state
    ]
))

完整修改示例 #

let data = [
    {agent_id: "325D" , email: "Ramm@c.m", name: "Ramm" ,referal_id:  "C873" ,state:  "U.P"},
    {agent_id: "C873" , email: "Aamm@com", name: "Aman" ,referal_id:  "7CC8" ,state:  "M.P"}
];

<div className="mi-table">
    <MUIDataTable
        title={"Agent List"}
        data={data.data.map((item, i) => (
            [
                item.name,
                item.referal_id ? data.data.find(o => o.agent_id === item.referal_id)?.name : '',
                item.referal_id,
                item.state
            ]
        ))}
        columns={columns}
        options={options}
    />
</div>

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