对象数组filter调用includes报null读取错误解决方案

错误根因 #

Cannot read properties of null (reading 'includes')报错触发逻辑非常明确：执行数组过滤时，被遍历元素的number_client字段存在null值，对null直接调用includes方法就会抛出该类型错误。

现有代码还存在几处会触发异常或冗余的逻辑：

• 无意义的map拷贝：const newArray = datasClientService.map(val=>{ return val})仅做了一层浅拷贝，没有附加任何转换逻辑，完全可以移除，直接操作原数组即可。
• 缺少数据源兜底：Redux store的初始化阶段，datasClientService、resultSearchClient可能为undefined或null，直接执行数组遍历、字符串方法会触发报错。
• 渲染逻辑不合法：React不支持直接在JSX中渲染普通对象数组，直接将filterArray嵌入<p>标签会触发渲染异常。
• 匹配逻辑隐患：includes为子串匹配规则，如果业务要求客户编号精确匹配，会出现短编号误命中长编号的问题，可根据实际业务要求调整匹配规则。

修复后可运行代码 #

const ClientComponent = ()=>{
   const resultSearchClient = useSelector((state)=> state.reducerSearchCriteria)
   const datasClientService = useSelector((state)=> state.reducerClientAdmin.state)
   // 数据源兜底，确保遍历目标始终为数组
   const sourceList = Array.isArray(datasClientService) ? datasClientService : []
   // 搜索关键字兜底，统一转字符串避免类型不匹配
   const searchKey = String(resultSearchClient ?? '')

   const filterArray = sourceList.filter(u => {
     // 兜底空的客户编号，避免调用includes报错
     const clientNumber = String(u?.number_client ?? '')
     // 若需精确匹配，替换为 return clientNumber === searchKey 即可
     return clientNumber.includes(searchKey)
   })
  
   return(
     <div>
       {filterArray.map(item => (
         <p key={item.number_client}>客户编号：{item.number_client}</p>
       ))}
    </div>
 )
}

export default ClientComponent;

补充说明 #

如果业务场景允许number_client为纯数字值，统一转字符串后再做匹配可以避免类型不一致导致的匹配失效问题。

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