React拉取数据为null的异常处理：如何将空值替换为指定字符串

你可以根据使用场景选择以下两种处理方式：

方案1：数据转换阶段统一处理（更推荐） #

直接在map遍历处理数据时完成空值替换，逻辑集中，后续所有用到该字段的渲染位置都无需重复判断：

const transformedData = data.order_items.map((invoiceData) => {
  // 判断仓库名称是否为空
  const isWarehouseUndefined = !invoiceData.warehouse_name
  return {
    alternative_warehouse_position: invoiceData.alternative_warehouse_position,
    warehouse_column: isWarehouseUndefined ? "Undefined" : invoiceData.warehouse_column ?? "Undefined",
    warehouse_name: invoiceData.warehouse_name ?? "Undefined",
    warehouse_row: isWarehouseUndefined ? "Undefined" : invoiceData.warehouse_row ?? "Undefined",
  };
})

说明：这里用空值合并运算符??做判断，只会替换null/undefined类型的空值，不会误替换0、空字符串等合法值。如果不需要在仓库名称有值时单独处理列、行的空值，删掉后面的?? "Undefined"即可。

方案2：渲染阶段直接处理 #

如果不想改动上游数据转换逻辑，也可以在渲染段落时直接做判断，适合仅单个位置需要展示替换的场景：

<p>
  仓库名称：{invoiceData.warehouse_name ?? "Undefined"}
  仓库列：{!invoiceData.warehouse_name ? "Undefined" : invoiceData.warehouse_column ?? "Undefined"}
  仓库行：{!invoiceData.warehouse_name ? "Undefined" : invoiceData.warehouse_row ?? "Undefined"}
</p>

两种方案的对比 #

• 方案1逻辑统一，后续维护成本低，适合多位置用到该类字段的业务场景
• 方案2无需改动上游逻辑，适合仅单个展示位置需要替换、其余场景需要保留原始null值的轻量场景

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