React函数组件中实现轮播卡片独立点赞功能的方法

你遇到的问题核心是所有卡片共用了同一个count状态，所以点击任何一个点赞按钮，都会修改这个全局状态，导致所有卡片的点赞数同步变化。要实现单张卡片独立的点赞状态，需要把点赞数据和每个卡片的唯一标识（比如item.id）绑定，具体方案如下：

步骤说明 #

• 把单个count状态改成对象类型，用每个商品的id作为键，存储对应卡片的点赞数
• 修改点赞触发函数，接收当前商品的id作为参数，只更新该id对应的点赞数
• 渲染时，根据当前商品的id从状态对象中读取对应的点赞数

修改后的完整代码 #

// FlashDeals.jsx
import React, { useState } from "react";
import Slider from "react-slick";

export const FlashCard = ({ productItems }) => {
  // 初始化点赞状态：以item.id为键，初始值取item自带的likes或0
  const [likeCounts, setLikeCounts] = useState(() => 
    productItems.reduce((acc, item) => {
      acc[item.id] = item.likes || 0;
      return acc;
    }, {})
  );

  // 只更新指定id的点赞数
  const increment = (itemId) => {
    setLikeCounts(prev => ({
      ...prev,
      [itemId]: prev[itemId] + 1
    }));
  };

  const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 1,
  };

  return (
    <>
      <Slider {...settings}>
        {productItems.map((item) => {
          return (
            <div className="box" key={item.id}>
              <div className="product">
                <div className="img">
                  <span className="discount">{item.discount}% Off</span>
                  <img src={item.cover} alt={item.name} />
                  <div className="product-like">
                    {/* 显示当前item对应的点赞数 */}
                    <label>{likeCounts[item.id]}</label>
                    <br />
                    {/* 点击时传入当前item的id */}
                    <i className="fa-regular fa-heart" onClick={() => increment(item.id)}></i>
                  </div>
                </div>
              </div>
            </div>
          );
        })}
      </Slider>
    </>
  );
};

关键细节说明 #

1. 状态初始化：用useState的函数式初始化，避免每次渲染都执行reduce操作，同时把每个商品的初始点赞数（如果productItems里有likes字段）存入状态对象
2. 更新逻辑：使用函数式更新setLikeCounts，确保拿到最新的状态值，然后通过扩展运算符保留其他卡片的状态，只修改当前点击的卡片对应的点赞数
3. 事件绑定：点击点赞按钮时，用箭头函数把当前商品的id传给increment函数，确保只更新目标卡片的状态

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