筛选加密货币时报Cannot read properties of undefined (reading 'toLowerCase')错误怎么解决

报错信息：Cannot read properties of undefined (reading 'toLowerCase')

这个报错的本质是尝试对undefined类型的值调用toLowerCase()方法，从你给出的代码来看，存在两种可能的触发场景：

• coins数组中存在部分元素的name属性为undefined：比如后端返回的币种数据存在结构缺失、部分条目无name字段
• 搜索变量search未正确初始化，取值为undefined

你提供的原始代码如下：

const filteredCoins = coins.filter(coin => coin.name.toLowerCase().includes(search.toLowerCase()))

快速兼容修复 #

通过可选链、空值合并运算符做兜底处理，同时提前过滤无效币种数据，可直接解决报错，修改后代码如下：

// 搜索关键词兜底为空字符串，提前统一转小写避免重复计算
const formattedSearch = (search ?? '').toLowerCase()
const filteredCoins = coins.filter(coin => {
  // 跳过没有name属性的无效币种数据
  if (!coin?.name) return false
  return coin.name.toLowerCase().includes(formattedSearch)
})

根因排查 #

如果需要彻底解决异常来源，可按以下步骤定位：

• 打印coins数组校验数据结构：确认所有元素都存在string类型的name属性，也可以提前做一次数据清洗：const validCoins = coins.filter(coin => coin && typeof coin.name === 'string')
• 打印search变量校验取值：确认搜索变量初始化时默认值设为空字符串，比如React中状态初始化写为const [search, setSearch] = useState('')

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