React.js实现独立点赞按钮：点击仅单个按钮切换状态

你当前的问题是用单个布尔值状态like控制所有按钮，所以点击任意按钮都会修改这个全局状态，导致所有按钮同步切换。要实现单个按钮独立切换，需要给每个卡片分配独立的点赞状态。

解决方案1：用数组存储每个卡片的点赞状态 #

适合卡片列表静态或索引稳定的场景：

1. 修改状态初始化：
   用数组初始化状态，长度和CardData一致，初始值全为false：

   const [likedStates, setLikedStates] = useState(new Array(CardData.length).fill(false));
   

2. 更新点赞处理函数：
   接收卡片索引，只切换对应位置的状态：

   const handleLike = (index) => {
     // 函数式更新更安全，避免状态依赖问题
     setLikedStates(prevStates => 
       prevStates.map((state, idx) => idx === index ? !state : state)
     );
   };
   

3. 修改按钮渲染逻辑：
   点击时传入当前卡片的索引，根据数组对应位置的状态显示图标：

   <IconButton
     aria-label="fingerprint"
     color="default"
     sx={{
       zIndex: "4",
       bgcolor: "#4b4d4eb2",
       width: "2rem",
       padding: "4px",
     }}
     onClick={() => handleLike(idx)}
   >
     {likedStates[idx] ? (
       <FavoriteIcon sx={{ width: ".8em", color: "#fff" }} />
     ) : (
       <FavoriteBorderIcon sx={{ width: ".8em", color: "#fff" }} />
     )}
   </IconButton>
   

解决方案2：用对象存储（推荐，适合卡片有唯一ID的场景） #

如果CardData中的每个项有唯一id，用对象存储状态更稳妥（避免数组索引变化导致的状态错乱）：

1. 修改状态初始化：
   以卡片ID为键，初始值全为false：

   const [likedStates, setLikedStates] = useState(() => 
     CardData.reduce((acc, card) => ({ ...acc, [card.id]: false }), {})
   );
   

2. 更新点赞处理函数：
   接收卡片ID，切换对应ID的状态：

   const handleLike = (cardId) => {
     setLikedStates(prevStates => ({
       ...prevStates,
       [cardId]: !prevStates[cardId]
     }));
   };
   

3. 修改按钮渲染逻辑：
   点击时传入当前卡片的ID，根据对象中对应ID的状态显示图标：

   <IconButton
     aria-label="fingerprint"
     color="default"
     sx={{
       zIndex: "4",
       bgcolor: "#4b4d4eb2",
       width: "2rem",
       padding: "4px",
     }}
     onClick={() => handleLike(e.id)}
   >
     {likedStates[e.id] ? (
       <FavoriteIcon sx={{ width: ".8em", color: "#fff" }} />
     ) : (
       <FavoriteBorderIcon sx={{ width: ".8em", color: "#fff" }} />
     )}
   </IconButton>
   

核心原理 #

每个卡片需要独立的状态标识，通过数组/对象存储所有卡片的点赞状态，点击时仅更新当前卡片对应的状态项，从而实现单个按钮独立切换。

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