React记忆游戏开发：如何实现禁止重复点击同一图片的逻辑

我正在开发一款记忆游戏，规则要求用户不能重复点击同一图片，每次点击图片可获得1分，最高得分为10分。

现有实现细节：

• 通过Images.js导入导出所有250x250尺寸的动物图片：

const Images = [
  card01,
  card02,
  etc...
];

• 在Card.js循环渲染10张图片：

<div className="card">
  {Images.map((img) => (
    <img
      key={img}
      src={img}
      alt={img}
      onClick={incrementScore}
    />
  ))}
</div>

• 点击事件与洗牌逻辑：

const [score, setScore] = useState(0);

const incrementScore = () => {
  setScore(score + 1);
    if (score >= 10) {
      setScore(0);
    }
    shuffleArray();
    console.log(score);
};

const shuffleArray = () => {
  Images.sort(() => Math.random() - 0.5);
};

当前问题：点击任意图片都会加分洗牌，禁止重复点击同一图片的核心逻辑未实现，需保留所有图片始终显示在页面上，寻求实现方案。

核心思路是用状态记录已点击的图片，点击时先校验是否重复，再执行对应逻辑：

1. 新增已点击图片的状态
   添加clickedImages状态存储用户已点击的图片标识（比如图片的src）：

   const [clickedImages, setClickedImages] = useState([]);
   

2. 修改点击事件处理函数
   给incrementScore传入当前点击的图片，先判断是否已在已点击列表中：

   const incrementScore = (img) => {
     // 检测是否重复点击
     if (clickedImages.includes(img)) {
       // 重复点击，重置游戏状态
       setScore(0);
       setClickedImages([]);
       alert("重复点击！游戏重置");
     } else {
       const newScore = score + 1;
       setScore(newScore);
       setClickedImages([...clickedImages, img]);
       
       // 达到最高分，重置游戏
       if (newScore >= 10) {
         alert("恭喜满分！游戏重置");
         setScore(0);
         setClickedImages([]);
       }
       
       shuffleArray();
     }
   };
   

3. 修改图片渲染的点击传参
   在渲染时给onClick传入当前图片作为参数：

   <div className="card">
     {Images.map((img) => (
       <img
         key={img}
         src={img}
         alt={img}
         onClick={() => incrementScore(img)}
       />
     ))}
   </div>
   

4. 优化洗牌函数（避免直接修改原数组）
   原洗牌逻辑直接修改导入的Images常量，无法触发组件重新渲染，建议改用状态维护渲染用的图片数组：

   // 组件内新增状态维护渲染用的图片
   const [displayImages, setDisplayImages] = useState(Images);
   
   const shuffleArray = () => {
     // 基于副本洗牌，不修改原数组
     const shuffled = [...displayImages].sort(() => Math.random() - 0.5);
     setDisplayImages(shuffled);
   };
   

   之后渲染时改用displayImages.map(...)，确保洗牌后页面能自动更新。

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