ReactJS场景下对比两个数组删除productsArr中与cart id匹配的对象

你可以通过以下步骤完成需求，该方案符合React不可变数据更新的最佳实践，不会直接修改原数组，性能也更优：

1. 首先提取cart数组中的所有id，存为Set结构，用于后续快速匹配

const cartIds = new Set(cart.map(item => item.id));

2. 对productsArr执行过滤，只保留proId不在上述Set中的项，得到的结果就是删除匹配项后的新数组

const newProductsArr = productsArr.filter(product => !cartIds.has(product.proId));

场景适配（React state更新） #

如果你要更新的productsArr是React的state变量，直接调用setter方法更新即可，示例如下：

import { useState } from 'react';

function YourComponent() {
  const [cart, setCart] = useState([
    {id: 1, name: "item1"}, 
    {id: 2, name: "item2"}, 
  ]);
  const [productsArr, setProductsArr] = useState([
    {proId: 1, category: 'cat1'}, 
    {proId: 5, category: 'cat7'}, 
  ]);

  const deleteMatchedProducts = () => {
    const cartIds = new Set(cart.map(item => item.id));
    setProductsArr(prev => prev.filter(product => !cartIds.has(product.proId)));
  }

  return <button onClick={deleteMatchedProducts}>删除匹配项</button>
}

方案说明 #

• 用Set存储id是为了降低匹配的时间复杂度：Set的has方法时间复杂度为O(1)，如果用数组的includes方法每次匹配都是O(n)，当cart数据量较大时性能差距会很明显
• 用filter返回新数组而非直接用splice修改原数组，是因为React依赖state的引用变化检测更新，直接修改原数组不会触发组件重渲染，不符合React的更新规范
• 按你给出的示例数据执行后，得到的newProductsArr结果为[{proId: 5, category: 'cat7'}]，符合预期要求。

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