Javascript 我不能将每个产品单独添加或删除到Collection 列表中

如果你想让ADD_PRODUCT_TO_FAVORITE的动作变成102，一个接一个地将产品添加到Collection 列表中，而让DELETE_FAVORITE_PRODUCT的动作变成从Collection 列表中一个接一个地删除产品，那么我建议你重构如下:

1. 确保DELETE_FAVORITE_PRODUCT reducer用例正确访问action payload，以获取要删除的已定义产品对象.
2. 确保添加/删除Collection 夹是在state.favorites数组102 state.products数组上进行的，state.products数组是所有can受Collection 的产品的"真实性来源".
3. 您正在将当前映射的item传递给clear处理程序，请确保对该参数进行一致的命名，以便清楚传递的是什么.

代码:

const initialState = {  
  products: ProductData,
  cart: [],
  favorites: [],
};

const reducer = (state = initialState, action) => {
  switch(action.type){
    case 'ADD_PRODUCT_TO_FAVORITE':
      const product = action.payload;

      const favorited = state.favorites.find(
        (item) => item?.id === product?.id
      );

      if (!favorited) {
        // Not favorited, add to favorites list
        return {
          ...state,
          favorites: state.favorites.concat(product),
        };
      }
      // Otherwise return current state
      return state;

    case 'DELETE_FAVORITE_PRODUCT':
      const { product } = action.payload; // <-- get product from payload

      const favorited = state.favorites.find(
        (item) => item?.id === product?.id
      );

      if (favorited) {
        // Favorited, remove from favorites list
        return {
          ...state,
          favorites: state.favorites.filter((item)=> item.id !== product.id)
        };
      }
      // Otherwise return current state
      return state;
              
    case 'CLEAR':
      return { ...state, cart:[] };
           
    default:
      console.log("Unhandled action", { action });
      return state;
  }
};

const Favorite = () => {
  const { favorites, products } = useCart();
  const dispatch = useDispatch();

  const unfavorite = (product) => {
    dispatch({
      type: "DELETE_FAVORITE_PRODUCT",
      payload: { product }, // <-- pass product in payload
    });
  };
 
  return (
    <View style={{ flex: 1 }}>
      {!products.length ? (
        <View>
          <Text>Just add the items you would & place your order here.</Text>
        </View>   
      ) : (
        <View style={{ flex: 1 }}>
          <ScrollView>
            <View>
              {products.map((product) => (         
                <View key={product.id}>  
                  <Image source={product.image} />
                  <TouchableOpacity onPress={() => unfavorite(product)}>
                    <Image source={icons.love} />
                  </TouchableOpacity>
                </View>
              ))}
            </View>
          </ScrollView>
        </View>
      )}
    </View>
  );
};