React Native如何展示嵌套数组中对应餐厅的菜品信息？

问题分析 #

当前点击餐厅跳转后，MenuScreen的FlatList直接遍历了restaurantData整个数组，导致显示所有餐厅的菜品。需要调整为仅渲染选中餐厅的productData数组内容。

修改步骤 #

1. 优化RestaurantScreen的参数传递（可选但更健壮）

当前传递的是餐厅的index，建议直接传递选中的餐厅对象，避免因数据顺序变动导致的错误：

// RestaurantScreen.js
renderItem={({ item }) => (
  <RestaurantCard 
    screenWidth={SCREEN_WIDTH*.94}
    images={item.images}
    restaurantName={item.restaurantName}
    businessAddress={item.businessAddress}
    OnPressRestaurantCard={() => {
      // 直接传递选中的餐厅对象
      navigation.navigate("Menu", { selectedRestaurant: item });
    }}
  />
)}

2. 修改MenuScreen的FlatList数据源

核心是把FlatList的数据源改成选中餐厅的productData，下面分两种方式实现：

方式一：使用传递的餐厅对象（推荐）

// MenuScreen.js
export default class MenuScreen extends Component {
  render() {
    const { selectedRestaurant } = this.props.route.params;
    // 获取选中餐厅的菜品数组
    const menuItems = selectedRestaurant.productData;

    return (
      <View style={styles.container}>
        <View style={styles.cardView}>
          <View style={styles.headerTextView}>
            {/* 显示餐厅名称，增强用户体验 */}
            <Text style={styles.headerText}>What Do You Want To Eat From {selectedRestaurant.restaurantName}?</Text>
          </View> 
          <TouchableOpacity onPress={() => {this.props.navigation.navigate('Cart')}}>
            <View style={styles.cartContainer}>
              <View style={styles.cartCounterContainer}>
                <Text style={styles.cartText}>Cart</Text>
                <View style={styles.cartCounter}>
                  <Text style={styles.cartNum}>0</Text>
                </View>
              </View>
            </View>
          </TouchableOpacity>
          <View>
            <View style={{flex:1}}>
              <View style={styles.menuCard}>
                <FlatList 
                  style={{marginTop:10, marginBottom:10}}
                  // 数据源改为选中餐厅的productData
                  data={menuItems}
                  // 用菜品的id作为唯一标识
                  keyExtractor={item => item.id || String(Math.random())}
                  renderItem={({item})=>(
                    <MenuCard 
                      screenWidth={SCREEN_WIDTH*.9}
                      images={item.foodImages}
                      meal={item.meal}
                      price={item.price}
                      onPressMenuCard={()=>{this.props.navigation.navigate("Payment")}}
                    />
                  )}
                />
              </View>  
            </View>
          </View>
        </View>
      </View>
    )
  }
}

方式二：继续使用传递的index

// MenuScreen.js
export default class MenuScreen extends Component {
  render() {
    const index = this.props.route.params.index;
    // 根据index获取选中餐厅的菜品数组
    const menuItems = restaurantData[index].productData;

    return (
      <View style={styles.container}>
        <View style={styles.cardView}>
          <View style={styles.headerTextView}>
            <Text style={styles.headerText}>What Do You Want To Eat From {restaurantData[index].restaurantName}?</Text>
          </View> 
          <TouchableOpacity onPress={() => {this.props.navigation.navigate('Cart')}}>
            <View style={styles.cartContainer}>
              <View style={styles.cartCounterContainer}>
                <Text style={styles.cartText}>Cart</Text>
                <View style={styles.cartCounter}>
                  <Text style={styles.cartNum}>0</Text>
                </View>
              </View>
            </View>
          </TouchableOpacity>
          <View>
            <View style={{flex:1}}>
              <View style={styles.menuCard}>
                <FlatList 
                  style={{marginTop:10, marginBottom:10}}
                  data={menuItems}
                  keyExtractor={item => item.id || String(Math.random())}
                  renderItem={({item})=>(
                    <MenuCard 
                      screenWidth={SCREEN_WIDTH*.9}
                      images={item.foodImages}
                      meal={item.meal}
                      price={item.price}
                      onPressMenuCard={()=>{this.props.navigation.navigate("Payment")}}
                    />
                  )}
                />
              </View>  
            </View>
          </View>
        </View>
      </View>
    )
  }
}

关键修改点总结 #

• 确保MenuScreen的FlatList数据源是选中餐厅的productData数组，而非整个restaurantData
• 传递选中餐厅对象比传递index更健壮，避免数据顺序变化引发的错误
• 给FlatList的keyExtractor使用菜品自身的id，保证列表渲染的稳定性

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