React表格过滤时如何处理Null值？解决toString()空指针错误

问题根源 #

报错TypeError: Cannot read properties of null (reading 'toString')是因为当列值为null时，直接调用toString()会触发异常——null没有任何属性和方法。你的第二个筛选逻辑里的typeof row.dataValues.jobStatus !== null完全无效，因为typeof null返回的是"object"，根本拦不住null值进入后续的链式调用。

修复方案 #

核心思路是在调用toString()前先确保值不为null/undefined，下面是几种可行的修复方式：

方式1：显式判断空值后再处理

直接在筛选逻辑里先检查值是否存在，为空时直接返回不匹配（可根据需求调整）：

{data
    .filter((row) => 
        !searchedValueQuote || 
        (row.QuoteNo != null && 
         row.QuoteNo.toString().toLowerCase().includes(searchedValueQuote.toString().toLowerCase()))
    )
    .filter((row) => {
        const jobStatus = row.dataValues.jobStatus;
        if (!searchedValueStatus) return true;
        if (jobStatus == null) return false; // null/undefined直接不匹配筛选条件
        return jobStatus.toString().toLowerCase().includes(searchedValueStatus.toString().toLowerCase());
    })
    .map( 
        // ... 你的表格行渲染逻辑
    )
}

这里用== null可以同时判断null和undefined，比单独写=== null || === undefined更简洁。

方式2：使用可选链+空值合并简化代码

利用ES6+的可选链操作符?.和空值合并操作符??，更简洁地处理空值：

{data
    .filter((row) => 
        !searchedValueQuote || 
        (row.QuoteNo?.toString().toLowerCase() ?? '').includes(searchedValueQuote.toString().toLowerCase())
    )
    .filter((row) => 
        !searchedValueStatus || 
        (row.dataValues.jobStatus?.toString().toLowerCase() ?? '').includes(searchedValueStatus.toString().toLowerCase())
    )
    .map( 
        // ... 你的表格行渲染逻辑
    )
}

• ?.：如果前面的值是null/undefined，直接返回undefined，不会继续调用后续方法
• ?? ''：把undefined转换成空字符串，避免includes在undefined上调用出错

方式3：封装通用筛选函数（推荐）

如果有多列需要筛选，重复写逻辑太冗余，可以封装一个通用函数：

// 通用筛选函数：自动处理null/undefined，判断目标值是否匹配搜索关键词
const matchSearch = (targetValue, searchValue) => {
    if (!searchValue) return true;
    if (targetValue == null) return false;
    return targetValue.toString().toLowerCase().includes(searchValue.toString().toLowerCase());
};

// 使用时直接调用
{data
    .filter(row => matchSearch(row.QuoteNo, searchedValueQuote))
    .filter(row => matchSearch(row.dataValues.jobStatus, searchedValueStatus))
    .map( 
        // ... 你的表格行渲染逻辑
    )
}

这种方式代码更简洁，也方便后续维护和扩展。

额外提示 #

• 如果列值可能是其他 falsy 值（比如0、''），== null不会误过滤这些值，因为0 == null返回false，符合预期；空字符串调用toString()也能正常运行，无需额外处理。
• 可以给searchedValueQuote和searchedValueStatus也加上空值判断，避免空字符串或undefined调用toString()（虽然原生类型的toString()不会报错，但更严谨）。

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