React中如何根据另一数组匹配值输出数组内对象内容

给定代码 #

数据源数组

const data = [
    {
      id: 1,
      category: "ladders",
      name: "N/A",
      price: 0,
    },
    {
      id: 2,
      category: "ladders",
      name: "Ladder 1",
      price: 220,
    },
    {
      id: 3,
      category: "ladders",
      name: "Ladder 2",
      price: 420,
    },
    {
      id: 4,
      category: "ladders",
      name: "Ladder 3",
      price: 515,
    },
]

选中状态的useState

const [selections, setSelections] = useState({
  ladders: [2, 4]
});

重构方案 #

不需要手动指定索引，你可以通过以下两种方式实现匹配渲染：

方案一：筛选出匹配数据后渲染

先把选中的ID转成Set提升查找效率，再从数据源中过滤出匹配项，最后直接渲染过滤后的数组：

// 把选中ID转为Set，优化查找性能
const selectedLadderIds = new Set(selections.ladders);
// 过滤出所有ID匹配的梯子对象
const selectedLadders = data.filter(item => selectedLadderIds.has(item.id));

JSX渲染部分：

<div className="selected-ladders">
  {selectedLadders.map(ladder => (
    <div key={ladder.id} className="ladder-item">
      <h3>{ladder.name}</h3>
      <p>价格：${ladder.price}</p>
    </div>
  ))}
</div>

方案二：按选中ID顺序渲染

如果需要严格遵循selections.ladders中的ID顺序渲染，可以直接遍历选中ID数组，通过find找到对应对象：

<div className="selected-ladders">
  {selections.ladders.map(ladderId => {
    // 查找对应ID的梯子对象
    const matchedLadder = data.find(item => item.id === ladderId);
    // 处理ID无效的情况，避免渲染错误
    if (!matchedLadder) return null;
    
    return (
      <div key={matchedLadder.id} className="ladder-item">
        <h3>{matchedLadder.name}</h3>
        <p>价格：${matchedLadder.price}</p>
      </div>
    );
  })}
</div>

两种方案对比 #

• 方案一：渲染顺序和data数组一致，适合只需要展示所有选中项、不关心顺序的场景，性能更优（尤其数据量大时）。
• 方案二：渲染顺序和selections.ladders中的ID顺序一致，适合需要保持选中顺序的场景。

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