React中TypeError: Data.filter is not a function报错排查

TypeError: Data.filter is not a function 报错由两层问题共同导致：

• 第一层（直接触发报错的原因）：filter是JavaScript数组的内置原型方法，仅当调用者是数组类型时可正常执行。报错说明子组件首次渲染时接收到的Data props不是数组：
  • 大概率是父组件的Data存在异步赋值逻辑（比如接口拉取、WebSocket消息推送赋值），首次渲染时Data的初始值是undefined、null或者普通对象，等异步数据返回后才会变成数组
  • 小概率是父组件传参时拼写错误、传值类型错误，没有把目标数组正确传入子组件
• 第二层（逻辑错误，就算类型对了也拿不到预期结果）：现有filter的匹配逻辑写的是item => item === "BTCUSDT"，但数组里的每一项都是对象，直接把对象和字符串"BTCUSDT"做全等判断永远返回false，筛选不到任何目标项。你要匹配的是对象内部s字段的值等于BTCUSDT。

1. 增加数组类型兜底，避免首次渲染非数组值触发报错
   可以给props设置数组默认值，或者调用方法前做类型校验：

// 直接给props设置默认空数组
const CounterBox = ({Data = []}) => {
  // 原有组件逻辑
}

2. 修正筛选匹配逻辑，同时优化渲染结果避免出现数组拼接逗号
   因为你筛选的BTCUSDT是唯一交易对，筛选后直接取第一条的c字段即可，不用遍历map，同时加可选链兜底避免空值报错：

// 替换原来${Data.filter(...).map(...)}的部分
${Data.find(item => item.s === "BTCUSDT")?.c ?? '--'}

这里用find替代filter更合适，因为只需要取第一条匹配项，性能更好，?? '--'是匹配不到数据时显示的占位符，可以根据需求替换。

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