React Native过滤Firebase来源FlatList数据时出现undefined报错如何解决

该报错本质是异步请求的时序问题：

• 本地JS文件的数据源是静态同步加载的，页面首次渲染时就已经是完整数组类型，所以调用filter方法不会出错
• Firebase数据是异步拉取的，请求返回前页面已经完成首次渲染，此时你存储Firebase数据的状态变量（代码中为ExercisesList，报错提示中为MeasuresList，注意检查变量名是否统一）初始值不是数组类型，调用filter方法就会抛出undefined的错误。

你遇到的复现现象完全符合这个逻辑：

• 去掉filter逻辑直接进入页面：首次渲染时数据源异常但FlatList本身兼容空值不会报错，等Firebase请求返回更新状态后触发重渲染，就能正常展示全量数据
• 热重载时添加filter逻辑可正常运行：此时Firebase请求已经完成，状态里已经是合法数组，执行filter逻辑自然不会报错

1. 给状态设置正确初始值 #

声明存储Firebase数据的状态时，初始值固定为空数组，保证首次渲染时调用filter的主体一定是数组类型：

// 错误写法 初始值为undefined或null
const [ExercisesList, setExercisesList] = useState()
// 正确写法 初始值为空数组
const [ExercisesList, setExercisesList] = useState([])

2. 增加兼容兜底逻辑 #

可以搭配可选链和空值合并运算符做兜底，避免极端情况下变量异常导致页面崩溃：

<FlatList 
  style={styles.flatList}
  data={ExercisesList?.filter(item => item.muscle === "shoulders") ?? []}
  keyExtractor={(item) => item.id}
  renderItem={({ item }) => item.name}
/>

额外注意：检查代码中用到的列表变量名是否统一，报错提示的MeasuresList和你代码里写的ExercisesList不一致，避免出现变量名拼写错误的低级问题。

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