React中如何对比两个数组并筛选出package_id匹配的元素？

嘿，这个需求其实很好实现，用JavaScript数组的原生方法就能搞定，我给你两种实用的方案，你可以根据数据量来选：

先从array1里提取所有需要保留的package_id，然后用这个列表去过滤array2，只留下匹配的项：

// 提取array1中所有有效的package_id
const validPackageIds = array1.map(item => item.package_id);

// 过滤array2，只保留package_id在有效列表中的对象
const array3 = array2.filter(item => validPackageIds.includes(item.package_id));

如果你的数组数据比较多，用Set来存储有效ID会让查找效率更高（Set.has()是O(1)时间复杂度，比数组的includes()的O(n)更快）：

// 把array1的package_id转换为Set集合
const validPackageIdSet = new Set(array1.map(item => item.package_id));

// 过滤array2
const array3 = array2.filter(item => validPackageIdSet.has(item.package_id));

如果你需要在React组件里处理这个逻辑，通常可以把过滤逻辑放在useEffect钩子中，确保当array1或array2变化时自动更新结果：

import { useState, useEffect } from 'react';

function PackageFilterComponent() {
  // 初始化你的两个数组状态
  const [array1, setArray1] = useState([{package_id: 4, is_checked: 1, images: []}]);
  const [array2, setArray2] = useState([
    {package_id: 3, width: "80", length: "120", height: "200", weight: "222"},
    {package_id: 4, width: "210", length: "70", height: "76", weight: "83"}
  ]);
  // 存储过滤后的结果数组
  const [array3, setArray3] = useState([]);

  useEffect(() => {
    // 每次依赖项变化时重新计算过滤结果
    const validIds = new Set(array1.map(item => item.package_id));
    const filteredPackages = array2.filter(item => validIds.has(item.package_id));
    setArray3(filteredPackages);
  }, [array1, array2]); // 依赖array1和array2，数据变化时触发

  return (
    <div className="package-list">
      {/* 渲染过滤后的结果 */}
      {array3.map(package => (
        <div key={package.package_id} className="package-item">
          <p>ID: {package.package_id}</p>
          <p>尺寸: {package.width}×{package.length}×{package.height}</p>
          <p>重量: {package.weight}</p>
        </div>
      ))}
    </div>
  );
}

export default PackageFilterComponent;

简单说，核心就是用filter来筛选array2，用map或者Set来快速判断package_id是否匹配，完全不需要额外的库，原生JS就能搞定~

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