用另一个数组过滤一个数组

Question

我对反应还很陌生，我正在开发一种产品，我试图从我的products数组中获取产品及其详细信息，并过滤掉购物车中的产品。 我已经尝试过几种方法来做到这一点，但我正在努力让它发挥作用。 我有：

import React, { useEffect } from 'react';
import Product from '../components/Product';
import {Link, useParams } from 'react-router-dom';
import { listProducts } from '../actions/productActions';


 export default function CarouselForProductPage(props) {
    const dispatch = useDispatch();
    const productList = useSelector((state) => state.productList);
    const { loading, error, products } = productList;
    const cart = useSelector((state) => state.cart);
    const { cartItems } = cart;
    useEffect(() =>{
        dispatch(listProducts({}));
    }, [dispatch]);

    
    var cart_ids = cartItems.map(product => ({ _id: product._id }));
     console.log(cart_ids);

    let res = products.filter(x => !cart_ids.includes(x));
    console.log(res);

   var carts = products.filter((x) => x._id !== cart_ids);
   console.log(carts);

    
  return (
    <div>
        
    </div>
  );
}

我的cartItems变量是我购物车中产品数据的数组，而cart_ids是与这些产品关联的 ID。 可变products列出了与我的每个产品关联的所有数据。 我正在尝试从cart_ids中包含 id 的products中过滤掉产品。 我尝试过两种不同的方式：

let res = products.filter(x => !cart_ids.includes(x));
    console.log(res);

和

   var carts = products.filter((x) => x._id !== cart_ids);
   console.log(carts);

这两个 arrays（资源和购物车）给我的结果等于products数组。

对于我做错的任何帮助或指导，我将不胜感激。谢谢！

cart_ids = [
0:
_id: "622ae8d94bee11259a3b1756"
[[Prototype]]: Object
1:
_id: "624bc1a50f91078261ab650d"
[[Prototype]]: Object
]

products = 
[0:
image: "/uploads/2022-03-11T06:15:00.618Zproduct-1.jpg"
name: "Bliss"
price: 40
__v: 5
_id: "622ae8d94bee11259a3b1756"
[[Prototype]]: Object
1:
image: "/uploads/2022-03-12T23:31:14.922Zproduct-2.jpg"
name: "sample name 1647127866131"
price: 30
__v: 1
_id: "622d2d3a4bee11259a3b17ed"
[[Prototype]]: Object
2:
image: "/uploads/2022-04-05T04:12:46.469Zproduct-4.jpg"
name: "sample name 1649131941926"
price: 50
__v: 1
_id: "624bc1a50f91078261ab650d"
[[Prototype]]: Object
3:
image: "/uploads/2022-04-05T04:39:38.449Zproduct-1.jpg"
name: "sample name 1649133566290"
price: 60
__v: 1
_id: "624bc7fe0f91078261ab6529"
[[Prototype]]: Object
4:
image: "/uploads/2022-04-05T04:40:31.140Zproduct-5.jpg"
name: "sample name 1649133604220"
price: 40
__v: 1
_id: "624bc8240f91078261ab6531"]

我想要得到的结果

[[0:
image: "/uploads/2022-03-12T23:31:14.922Zproduct-2.jpg"
name: "sample name 1647127866131"
price: 30
__v: 1
_id: "622d2d3a4bee11259a3b17ed"
[[Prototype]]: Object
1:
image: "/uploads/2022-04-05T04:39:38.449Zproduct-1.jpg"
name: "sample name 1649133566290"
price: 60
__v: 1
_id: "624bc7fe0f91078261ab6529"
[[Prototype]]: Object
2:
image: "/uploads/2022-04-05T04:40:31.140Zproduct-5.jpg"
name: "sample name 1649133604220"
price: 40
__v: 1
_id: "624bc8240f91078261ab6531"]]

Answer 1

cart_ids 是一个对象数组，您需要首先将其解析为字符串数组以用于includes 。

常量 cardIdOnlyArray = cartIds.map(x => x._id)

 const products = [ { image: '/uploads/2022-03-11T06:15:00.618Zproduct-1.jpg', name: 'Bliss', price: 40, __v: 5, _id: '622ae8d94bee11259a3b1756', }, { image: '/uploads/2022-03-12T23:31:14.922Zproduct-2.jpg', name: 'sample name 1647127866131', price: 30, __v: 1, _id: '622d2d3a4bee11259a3b17ed', }, { image: '/uploads/2022-04-05T04:12:46.469Zproduct-4.jpg', name: 'sample name 1649131941926', price: 50, __v: 1, _id: '624bc1a50f91078261ab650d', }, { image: '/uploads/2022-04-05T04:39:38.449Zproduct-1.jpg', name: 'sample name 1649133566290', price: 60, __v: 1, _id: '624bc7fe0f91078261ab6529', }, { image: '/uploads/2022-04-05T04:40:31.140Zproduct-5.jpg', name: 'sample name 1649133604220', price: 40, __v: 1, _id: '624bc8240f91078261ab6531', }, ] const cartIds = [ { _id: '622ae8d94bee11259a3b1756', }, { _id: '624bc1a50f91078261ab650d', }, ] const cardIdOnlyArray = cartIds.map(x => x._id) const result = products.filter(product =>.cardIdOnlyArray.includes(product._id)) console.log(result)

Answer 2

我的猜测是，在您的第一个示例中，您可能忘记在.cart_ids.includes(x)中包含x._id 。 通过查看上面定义的products数组的格式，object 应该存在_id属性。

所以在第一种情况下它应该像

let res = products.filter(x => !cart_ids.includes(x._id));

第二种情况没有多大意义，因为您正在比较一个数组和属性（称为_id ，它可能是一个字符串或数字，并且即使它是引用类型（例如 object 或数组）也不会工作，因为比较这些数据具有严格运算符的类型将始终返回 false）