React中如何从数组中移除key或name匹配的重复项及无效数据

核心修改点如下：

• 修复原无imageUrl卡牌过滤逻辑的bug，避免遍历过程中修改原数组导致的元素漏检问题
• 新增同名卡牌去重逻辑，用Set记录已出现的卡牌名称，重印版本默认保留第一条有效记录
• 调整状态更新时机，所有数据处理完成后统一更新状态，避免不必要的重复渲染

修改后的完整代码如下：

import React, { useEffect, useState } from "react";
import CardList from "./CardList";
import SearchBar from "./SearchBar";

function DeckBuilder() {
  const [input, setInput] = useState('');
  // 初始值设置为空数组，避免子组件接收undefined报错
  const [mtgCardsList, setMtgCardsList] = useState([]);

  const fetchData = async (searchInput) => {
    const res = await fetch(`https://api.magicthegathering.io/v1/cards?name=${searchInput}`);
    const data = await res.json();
    const seenCardNames = new Set();
    // 先过滤无效卡牌再去重
    const processedCards = data.cards.filter(card => {
      // 筛掉无图片的卡牌
      if (!card.imageUrl) return false;
      // 筛掉已经出现过的同名卡牌
      if (seenCardNames.has(card.name)) return false;
      seenCardNames.add(card.name);
      return true;
    });
    setMtgCardsList(processedCards);
  }

  const updateInput = async (input) => {
    setInput(input);
    await fetchData(input);
  }

  useEffect(() => { fetchData("") }, []);

  return (
    <div>  
      <SearchBar input={input} onChange={updateInput}/>
      <div className="cardcontainer">
        <CardList mtgCardsList={mtgCardsList}/>
      </div>
    </div>
  )
}

export default DeckBuilder;

如果后续需要按特定规则保留重印版本（比如保留最新版本、指定系列的版本），只需要在过滤前对原数组做排序，将你需要保留的版本排到最前即可，去重逻辑会自动保留第一条符合条件的记录。

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