Question

我在为电子商务应用程序添加喜欢的功能时遇到问题。出现未定义的错误。enter image description here

    case TOGGLE_FAVOURITE:
 
        const exitsIndex = state.favouriteProducts.findIndex((meal) => meal.id === action.productId);
        if(exitsIndex >= 0) {
            return { ...state, favouriteProducts: state.favouriteProducts.filter((meal) => meal.id !== action.productId) }
        } else {
            const favMeal = state.availableProducts.find((meal) => meal.id === action.productId);
            return { ...state, favouriteProducts: state.favouriteProducts.concat(favMeal) };
        }
 
 
This is my action:
export const toggleFavourite = id => {
    return { type: TOGGLE_FAVOURITE, productId: id };
};
 
And this is my call function: 
 const toggleFavouriteHandler = useCallback(() => {
        dispatch(toggleFavourite(productId));
      }, [dispatch, productId]);

Answer 1

在findIndex上进行favouriteProducts时，必须检查初始状态，favouriteProducts为空。

所以只要检查是否 state.favouriteProducts === null，应该可以使用

Answer 2

为防止TypeError，您应检查state.favouriteProducts是undefined还是null。

在这种情况下，我会使用：

case TOGGLE_FAVOURITE:
  if (!state.favouriteProducts) return false; // you need this

  const exitsIndex = state.favouriteProducts.findIndex((meal) => meal.id === action.productId);
      
  if (exitsIndex >= 0) {
    return { ...state, favouriteProducts: state.favouriteProducts.filter((meal) => meal.id !== action.productId) }
  } else {
    const favMeal = state.availableProducts.find((meal) => meal.id === action.productId);
    return { ...state, favouriteProducts: state.favouriteProducts.concat(favMeal) };
  }

Answer 3

我找到了不同的解决方案。现在可以正常工作了

case TOGGLE_FAVOURITE:
const addedFavourite = action.product;
const id = addedFavourite.id;
const product_name = addedFavourite.product_name;
const product_image = addedFavourite.product_image;
const product_description = addedFavourite.product_description;
const product_price = addedFavourite.product_price;
const category_id = addedFavourite.category_id;

let updatedFavouriteItem = new Product(
    id,
    product_name,
    product_image,
    product_description,
    product_price,
    category_id,
)

if(state.items[addedFavourite.id] != null){   

let updatedCartItems = { ...state.items };
delete updatedCartItems[action.product.id];
  return {
    ...state,
    items: updatedCartItems,
}
    }
    return{
        ...state,
        items: {...state.items, [addedFavourite.id]: updatedFavouriteItem }
    }
    }
    return state;
}

反应本机Redux问题

3 个答案: