在使用 map 渲染這些元素時，如何在每個元素上使用類似和不同的功能？

Question

我的社交媒體帖子存儲在firebase中，每個帖子都有一個贊按鈕。 我正在使用map() function 來呈現這些帖子，但我已經聲明了一個 state 用於使用useState()的類似按鈕。 當我在任何帖子中單擊“喜歡”按鈕時，state 會針對所有帖子進行更改，當我不喜歡時也會發生同樣的情況。 我如何更改 state 用於點擊喜歡的特定帖子？

function Feed(){

const [like, setLike] = useState(false);
const [heart, setHeart] = useState(false);
{posts.map((item) => (
      <div
        key={item.id}
        className=" flex flex-col gap-2 bg-white rounded-xl p-3 border border-gray-300 shadow- 
 lg mb-2"
      >
        <div className=" flex gap-2 items-center">
          <img
            src={userImage}
            className=" w-[48px] h-[48px] rounded-full "
            alt=""
          />
          <span className=" text-black font-semibold text-sm">
            {userName}
          </span>
        </div>
        <hr />
        {item.body && <p>{item.body}</p>}
        {item.imageUrl && <img src={item.imageUrl} alt="" />}
        {item.videoUrl && (
          <iframe
            src={item.videoUrl}
            title={item.id}
            frameBorder="0"
            className=" w-full h-[20rem] "
          ></iframe>
        )}

        <hr />
        <div className=" flex gap-2">
          {like ? (
            <ThumbUpIcon
              className=" cursor-pointer text-blue-600 hover:bg-gray-100 px-2 py-2 
   hover:rounded-md"
              fontSize="large"
              onClick={() => setLike(!like)}
            />
          ) : (
            <ThumbUpOutlinedIcon
              className=" cursor-pointer text-gary-500 hover:bg-gray-100 px-2 py-2 
   hover:rounded-md"
              fontSize="large"
              onClick={() => setLike(!like)}
            />
          )}
          {heart ? (
            <FavoriteOutlinedIcon
              className=" cursor-pointer text-red-500 hover:bg-gray-100 px-2 py-2 
   hover:rounded-md"
              fontSize="large"
              onClick={() => setHeart(!heart)}
            />
          ) : (
            <FavoriteBorderOutlinedIcon
              className=" cursor-pointer text-gary-500 hover:bg-gray-100 px-2 py-2 
    hover:rounded-md"
              fontSize="large"
              onClick={() => setHeart(!heart)}
            />
          )}
        </div>
      </div>
    ))}
   }

Answer 1

我建議不要使用 boolean 變量來保持類似的帖子定義一個數組並添加每個喜歡的元素的 id

const [likes, setLikes] = useState([]);

And

likes.findIndex(x=>x===item.id)<0 ?

onClick={() => {likes.add(item.id);setLikse(...likes)}}