React Native中如何过滤FlatList项并解决filter调用报错问题

报错原因 #

你出现该报错的核心原因是 ItemView 作为 FlatList 的 renderItem 回调，入参 item 是当前遍历到的单个数据对象，而 filter 是数组专属方法，对象调用不存在的 filter 方法就会抛出这个错误。

最优解决方案 #

优先在将数据传入 FlatList 之前完成过滤，性能更高，也不会出现隐藏项导致的空白问题。你可以在拿到API响应存state时就完成过滤：

var api_response = resp.docs
// 新增过滤逻辑
const today = moment().utcOffset(0, false);
const validShifts = api_response.filter(i => {
  const dateDiff = today.diff(i.shift_date, 'days') * -1;
  return dateDiff >= 0;
})
setShift(validShifts);

修改后原来的FlatList、ItemView代码不需要做任何调整，直接正常使用即可，此时FlatList拿到的已经是全部符合要求的今日/未来日期数据。

备选方案 #

如果业务场景需要保留原始全量数据，不能在存state时过滤，可以在ItemView中直接判断当前项是否符合要求，不符合就返回null不渲染：

const ItemView = ({item}) => {
  const todayy = moment().utcOffset(0, false);
  const dateDiff = todayy.diff(item.shift_date, 'days') * -1;
  // 过去日期的项直接返回空，不渲染
  if(dateDiff < 0) return null;

  return (
    <View key={item._id + '--'}>
      <View>
        <ShiftComponent
          id={item}
          dateOfShift={item.shift_date}
        />
      </View>
    </View>
  );
};

注意：该方案下FlatList仍会遍历所有原始数据，不符合要求的项虽然不显示内容，但如果你的样式有默认外边距/内边距，可能会出现多余空白，非必要不推荐使用。

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