Picker选择城市后FlatList仅展示对应城市餐厅的实现问题

嘿，我来帮你搞定这个城市筛选功能！你的需求很明确——选完城市后只展示对应城市的餐厅，咱们一步步调整你的代码来实现：

第一步：调整State结构 #

首先，咱们把原始餐厅数据和筛选后的数据分开存，这样切换城市时不用重复请求Firebase，直接本地筛选就行，性能更优。修改你的state初始化：

this.state = {
  city: "all",
  originalRestaurants: [], // 存从Firebase获取的所有餐厅
  dataRestaurants: [] // 存筛选后的餐厅列表
};

第二步：优化getRestaurants函数 #

把获取到的所有餐厅先存到originalRestaurants，然后调用筛选函数生成初始的dataRestaurants。另外，你原来的async关键字没用到，咱们改成async/await写法更清晰：

async getRestaurants() {
  try {
    const querySnapshot = await firebase.firestore().collection('restaurants').get();
    const allRestaurants = querySnapshot.docs.map(doc => doc.data());
    this.setState({ originalRestaurants: allRestaurants }, () => {
      // 数据存好后立刻执行筛选
      this.filterRestaurantsByCity();
    });
  } catch (error) {
    console.error("获取餐厅数据失败：", error);
  }
}

第三步：新增筛选函数 #

写一个专门的函数来根据选中的城市过滤餐厅，逻辑很简单：如果选的是"all"就返回所有数据，否则只保留城市匹配的餐厅：

filterRestaurantsByCity() {
  const { originalRestaurants, city } = this.state;
  let filteredRestaurants = originalRestaurants;
  
  if (city !== "all") {
    filteredRestaurants = originalRestaurants.filter(restaurant => {
      // 这里要注意你的餐厅数据里城市字段的键名，比如是`city`还是`restaurantCity`，要和Firestore里的字段对应！
      return restaurant.city === city;
    });
  }
  
  this.setState({ dataRestaurants: filteredRestaurants });
  console.log(`筛选后的数据：`, filteredRestaurants);
}

第四步：修改updateCity函数 #

当用户切换城市时，更新city状态后立刻调用筛选函数，这样列表就会实时更新：

updateCity(selectedCity) {
  this.setState({ city: selectedCity }, () => {
    this.filterRestaurantsByCity();
  });
}

第五步：确认渲染部分 #

你的FlatList已经用了data={this.state.dataRestaurants}，这部分不用改，只要确保renderNativeItem组件能正确渲染单个餐厅数据就行。

补充说明 #

• 一定要确认Firestore里的餐厅文档中，城市字段的键名和你在筛选函数里写的restaurant.city一致，比如如果Firestore里是resCity，那就要改成restaurant.resCity === city。
• 新增的错误捕获可以帮你排查数据获取时的问题，避免白屏。

这样一来，用户选完城市后，FlatList就会立刻展示对应城市的餐厅啦！

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