react-native - React Native Redux 问题

Question

我在为电子商务应用程序添加最喜欢的功能时遇到问题。得到未定义的错误。在此处输入图像描述

    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

我找到了不同的解决方案。现在它的工作

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;
}

Answer 3

为了防止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) };
  }