AntTag因find返回undefined显示为空，求显示None的解决方法

直接修改代码中的空值处理逻辑即可，这里提供两种可靠的实现方式：

方式一：获取name时直接兜底 #

利用ES6的空值合并运算符（??），仅当左侧值为undefined或null时，自动替换为右侧默认值：

if (_.isArray(ids)) {
  return ids.map((id) => {
    // 找不到对应部门时，name直接设为"None"
    let name = this.state.departments.find((x) => x.id === id)?.name ?? "None";
    console.log(name);
    return (
      <AntTag className=' cursor-pointer' color='magenta'>
        {name}
      </AntTag>
    );
  });
}

return '';

方式二：在AntTag渲染时处理 #

如果想保留原始name的判断逻辑，也可以在组件内部做兜底：

if (_.isArray(ids)) {
  return ids.map((id) => {
    let name = this.state.departments.find((x) => x.id === id)?.name;
    console.log(name);
    return (
      <AntTag className=' cursor-pointer' color='magenta'>
        {/* 精准匹配undefined/null，避免误判空字符串、0等其他假值 */}
        {name ?? "None"}
      </AntTag>
    );
  });
}

return '';

为什么之前的写法没生效？ #

你之前用的{name ? name : "None"}是逻辑或判断，理论上对undefined应该生效，但如果是在map循环外尝试修改name[i]，会因为map内部的name是局部变量而失效。而??运算符更精准，只会在值为undefined或null时触发兜底，不会误判其他假值，更贴合你的需求。

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