如何为每个映射生成的卡片元素统计独立点击次数？

问题场景 #

将一组数据渲染为卡片组件时，需要为每个卡片单独统计点击次数，但使用全局变量会导致所有卡片共享同一计数，尝试过id.index、(id)+index这类拼接标识的方式也无法实现独立计数。

原代码问题分析 #

你提供的点击处理函数存在两个核心问题：

• 每次点击时都会重新声明let index = 0，导致计数无法累计，每次点击后index永远是1
• 没有将计数与具体卡片的唯一标识绑定，无法区分不同卡片的点击行为

// 原代码的问题：每次点击都会重置index，且无关联卡片ID
function onClick(id) {
    let index = 0;
    index++;
    if (index >= 1) {
      dosomething
    } else if (index === 0) {
      dosomethingelse
    }
  }

解决方案：使用useRef Hook实现独立计数 #

利用React的useRef Hook创建一个持久化的对象，以卡片的唯一ID为键存储对应点击次数，这样每个卡片的计数会独立保存且不会随组件渲染重置。

完整实现示例

import { useRef } from 'react';

function CardList() {
  // 初始化useRef，用对象存储每个卡片的点击次数
  const clickCounts = useRef({});

  const handleCardClick = (cardId) => {
    // 首次点击时初始化该卡片的计数为0
    if (!clickCounts.current[cardId]) {
      clickCounts.current[cardId] = 0;
    }
    // 点击次数累加
    clickCounts.current[cardId]++;

    // 根据计数执行对应逻辑
    if (clickCounts.current[cardId] === 1) {
      // 第一次点击的操作逻辑
      console.log(`卡片${cardId}首次被点击`);
    } else if (clickCounts.current[cardId] >= 3) {
      // 点击次数≥3的操作逻辑
      console.log(`卡片${cardId}已点击${clickCounts.current[cardId]}次`);
    }
  };

  // 示例卡片数据（实际项目中替换为你的数据源）
  const cards = [
    { id: 'user_1', title: '用户卡片1' },
    { id: 'user_2', title: '用户卡片2' },
    { id: 'user_3', title: '用户卡片3' }
  ];

  return (
    <div className="card-container">
      {cards.map(card => (
        <div
          key={card.id}
          className="card"
          onClick={() => handleCardClick(card.id)}
        >
          <h3>{card.title}</h3>
          <p>已点击：{clickCounts.current[cardId] || 0}次</p>
        </div>
      ))}
    </div>
  );
}

方案说明 #

• useRef的.current属性在组件整个生命周期内保持引用，不会因组件重新渲染而重置，确保计数持久化
• 以卡片唯一ID作为对象的键，每个卡片的计数相互独立，不会出现全局变量的共享问题
• 可以直接在组件中访问clickCounts.current[cardId]获取对应卡片的实时点击次数，用于UI展示或逻辑判断

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