React+Redux项目搜索组件无法访问reducer数据报toLowerCase未定义错误

API 探路者

2026-10-1

报错根因

错误出现在Businesses组件的过滤逻辑中：

let businessesMatch = businessesReducer.businesses.filter( (business ) => business.name.toLowerCase().includes(this.state.newSearch.toLowerCase()))

触发toLowerCase报错只有两种可能：

business本身是undefined
business存在但business.name是undefined

修复方案

1. 兼容异常判断，先阻止报错

把过滤逻辑改成带兜底的写法，不管是数据为空还是字段缺失都不会触发报错：

let businessesMatch = (businessesReducer?.businesses || []).filter( business => 
  business?.name?.toLowerCase().includes(this.state.newSearch.toLowerCase() || '') || false
)

2. 清洗接口返回的无效数据

你触发GET_ALL_BUSINESSES_SUCCESS时传入的action.businesses大概率存在不符合预期的项：要么数组里混了undefined值，要么部分商家数据没有name字段（比如后端字段名写错、返回空值），可以在reducer里加数据清洗逻辑：

case "GET_ALL_BUSINESSES_SUCCESS": 
  // 过滤掉没有id、name的无效商家数据
  const validBusinesses = (action.businesses || []).filter(item => item && item.id && item.name)
  return { 
    ...state,
    businesses: validBusinesses,
    isLoading: false
  }

3. 加载状态优化（可选）

可以复用reducer里的isLoading字段，接口请求未完成时展示加载状态，避免空状态下的异常渲染：

render() {
  const { businessesReducer} = this.props;
  // 加加载判断
  if (businessesReducer.isLoading) return <div>商家数据加载中...</div>

  // 原有逻辑
  let businessesMatch = (businessesReducer?.businesses || []).filter( business => 
    business?.name?.toLowerCase().includes(this.state.newSearch.toLowerCase() || '') || false
  )
  // ...剩下的返回逻辑
}