React获取后端数据后过滤时出现Cannot read properties of undefined错误

问题根源 #

报错的核心原因是：页面刷新时，text.value可能为undefined或null，直接调用replace方法会触发类型错误。这种情况通常出现在两个场景：

• 后端返回的critical_updates字段为空、未定义；
• 组件初始化阶段tableData还未完成异步加载，表格先渲染了空数据。

解决方案 #

1. 给replace调用添加空值兜底 #

直接在valueFormatter里判断text.value的存在性，避免无意义的报错：

valueFormatter: (text) => (text.value || "").replace(/<[^>]*>/g, "")

或者用ES6可选链语法简化：

valueFormatter: (text) => text.value?.replace(/<[^>]*>/g, "") || ""

2. 预处理表格数据 #

在组件接收tableData后，先统一处理所有数据项，确保critical_updates有默认值：

import { useMemo } from 'react';

function ShiftViewTable({ tableData }) {
  // 预处理数据，给critical_updates设置默认空字符串
  const processedData = useMemo(() => {
    return tableData?.map(item => ({
      ...item,
      critical_updates: item.critical_updates ?? ""
    })) || [];
  }, [tableData]);

  // 后续表格使用processedData而非原始tableData
}

3. 列定义中设置默认值 #

直接在列配置里添加defaultValue，从源头避免空值：

{
  field: "critical_updates",
  flex: 2,
  defaultValue: "",
  valueFormatter: (text) => text.value.replace(/<[^>]*>/g, "")
}

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