尝试定位一个映射列表项并在反应中更改其图标

Question

我正在尝试将轮廓心形图标更改为实心心形图标 onClick。我让它工作，但每张卡片上的所有红心都变了。

我知道我必须尝试使用​​ track.id 或某种 ID，但我不知道该怎么做？

如有任何帮助，我们将不胜感激。

谢谢！

const [clicked, setClicked] = useState(false);


return (
   {results.tracks.map(track => (
       
          <IonCard className="IonCard" key={track.id} color=''>
                   <IonItemGroup translucent>

                                {clicked?
                                    <IonItem lines="none"
                                       className="card-icons"
                                       key={track.id}
                                       onClick={() =>
                                         setClicked(false)
                                       }
                                     >
                                         <IonIcon
                                             className="card-icons"
                                             icon={heart}
                                             id="disLikeHeart"
                                             slot="start"
                                             value={track.id}
                                            />
                                <IonLabel>Discovered Music/>
                                        </IonItem>

                                        :

                                    <IonItem lines="none"
                                       className="card-icons"
                                       key={track.id}
                                       onClick={() =>
                                          setClicked(true)
                                        }
                                     >
                                          <IonIcon
                                             className="card-icons"
                                             icon={heartOutline}
                                             id="likeHeart"
                                             slot="start"
                                             value={track.id}
                                            />
                                   <IonLabel>Discovered Music</IonLabel>
                                     </IonItem>
                                    }

                 </>IonItemGroup translucent>
         </IonCard>

   ))}
)

Answer 1

更改您的 onClick 以将 clicked 设置为 ID

onClick = {()=>setClicked(track.id)}

然后检查id是否与点击的id匹配

{clicked === track.id ?
   <IonItem lines="none"
     className="card-icons"
     key={track.id}
     onClick={() =>
      setClicked(false)
     }
   >