React Native Context Hooks如何获取所有菜单数组而非仅首个索引

问题说明 #

当前状态管理中仅能访问restaurantMenu数组第一个索引的菜单数据，根源是初始状态仅赋值了第一个分类的菜单：products: restaurantMenu[0].menu，以下是具体修正方案：

步骤1：修复数据代码语法错误 #

你的restaurantMenu数组存在结构错误，第一个分类对象缺失闭合}，先修正：

export const restaurantMenu = [
  {
    id: 1,
    name: "Western",
    foodType:'Western Food',
    rating: 4.8,
    categories: [1],
    icon: icons.western,
    photo: images.background_1,
    price: 20.00,
    menu:[
      {
        id: 1,
        name: "Chicken Fajita",
        photo: images.Chicken_Fajita,
        description: "Grilled Chicken Breast, Onion, Bell Pepper, Fajita Sauce",
        price: 20.00,
        rating:3,
        reviews:89,
      },
      {
        id: 2,
        name: "Cordon Bleu",
        photo: images.Cordon_Bleu,
        description: "Panne Fried Chicken Breast Stuffed with Mozzarella Cheese, Mushroom",
        price: 21.00,
        rating:4,
        reviews:90,
      },
    ]
  }, // 补上缺失的闭合大括号
  {
    id: 2,
    name: "Burgers",
    rating: 4.5,
    categories: [2],
    icon: icons.burger,
    photo: images.background_2,
    price: 10.00,
    menu:[
      {
        id: 3,
        name: "Beef Burger",
        photo: images.Beef_Burger,
        description: "Fresh Beef Patty, Lettuce, Mayonnaise Topped with Cheddar Cheese",
        price: 15.00,
        rating:3,
        reviews:89,
      },
      {
        id: 4,
        name: "Chicken Burger",
        photo: images.Chicken_Burger,
        description: "Fresh Chicken Burger Patty, Lettuce, Garlic Sauce, Cocktail Sauce,",
        price: 15.00,
        rating:3,
        reviews:89,
      },
    ]       
  }
];

步骤2：修改初始状态，合并所有菜单数据 #

将initialState中的products改为合并所有分类的菜单数组：

const initialState = {
  // 用flatMap合并所有分类的menu数组
  products: restaurantMenu.flatMap(item => item.menu),
  cart: [],
};

若环境不支持flatMap，可替换为reduce写法：

products: restaurantMenu.reduce((acc, item) => [...acc, ...item.menu], []),

步骤3：修正Reducer中的拼写错误 #

Reducer内INCREASE和DECREASE操作存在action.payLoad的大小写错误（应为action.payload），修正后：

const reducer = (state = initialState, action)=>{
    switch(action.type){
        // 保留原有ADD、DELETE、CLEAR逻辑不变
        case 'ADD':
            const item = state.products.find(
                (product) => product.id === action.payload.id
              );
              const inCart = state.cart.find((item) =>
                item.id === action.payload.id ? true : false
              );
        
              return {
                ...state,
                cart: inCart
                  ? state.cart.map((item) =>
                      item.id === action.payload.id
                        ? { ...item, qty: item.qty + 1 }
                        : item
                    )
                  : [...state.cart, { ...item, qty: 1 }],
              };
            
        case 'DELETE':
        return {
            ...state,
            cart: state.cart.filter((item) => item.id !== action.payload.id),
          };
       
        case 'INCREASE':
               const tempCart = state.cart.map((cartItem) => {
                // 修正为action.payload
                if (cartItem.id === action.payload.id) {
                  return { ...cartItem, qty: cartItem.qty + 1 };
                }
                return cartItem;
              });
              return { ...state, cart: tempCart };
        
        case 'DECREASE':
                const temp = state.cart.map((cartItem) => {
                    // 修正为action.payload
                    if (cartItem.id === action.payload.id) {
                      return { ...cartItem, qty: cartItem.qty - 1 };
                    }
                 return cartItem;
                  })
                  .filter((cartItem) => cartItem.qty !== 0);
                return { ...state, cart: temp };
              
        case 'CLEAR':
              return {cart :[]}
           
        default:
            throw new Error(`unknow action.${action.type}`)
    }
}

验证效果 #

修改完成后，state.products将包含所有分类的菜单数据，购物车的增删改查逻辑也能正常匹配所有商品ID。

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