React中点击映射列表单个条目修改Icon时所有卡片图标都变更如何解决

你当前所有卡片共用了同一个clicked布尔状态，所以任意卡片点击修改这个状态后，所有卡片的渲染判断都会同步触发变更，才会出现全部心形都切换的问题。你需要用状态存储所有已点赞的曲目ID，再单独判断每个曲目是否处于点赞状态即可。

修改后完整代码 #

// 状态改为存储所有已点赞的track id集合
const [likedTrackIds, setLikedTrackIds] = useState(new Set());

return (
   {results.tracks.map(track => (
          <IonCard className="IonCard" key={track.id} color=''>
                   <IonItemGroup translucent>
                                    <IonItem 
                                       lines="none"
                                       className="card-icons"
                                       onClick={() => {
                                         // 操作Set实现单条id的增删
                                         const updatedLikes = new Set(likedTrackIds);
                                         updatedLikes.has(track.id) ? updatedLikes.delete(track.id) : updatedLikes.add(track.id);
                                         setLikedTrackIds(updatedLikes);
                                       }}
                                     >
                                         <IonIcon
                                             className="card-icons"
                                             // 动态判断当前track是否点赞，切换对应图标
                                             icon={likedTrackIds.has(track.id) ? heart : heartOutline}
                                             slot="start"
                                            />
                                <IonLabel>Discovered Music</IonLabel>
                                        </IonItem>
                 </IonItemGroup>
         </IonCard>
   ))}
)

核心修改说明 #

• 状态类型从单个布尔值改为存储点赞ID的Set集合，支持同时记录多条已点赞的曲目ID
• 点击逻辑改为仅针对当前点击的track.id做增删操作，不会影响其他曲目的点赞状态
• 简化了重复的组件结构，无需分别写两种状态下的完整IonItem组件，只需要动态切换图标属性即可

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