React中选中NFT后如何取消选中并清空状态

你只需要修改onClick事件的逻辑，增加一个判断：如果当前点击的NFT已经处于选中状态（通过metadata.id匹配），就清空状态；否则将该NFT设为选中项。

修改后的代码如下：

{ownedNfts?.data?.map((nft) => (
        <div
          onClick={() => {
            // 判断当前点击的NFT是否已选中
            if (selectedNFT?.metadata?.id === nft.metadata.id) {
              setSelectedNFT(undefined); // 取消选中，清空状态
            } else {
              setSelectedNFT(nft); // 设置为选中项
            }
          }}
          className={`flex flex-col space-y-2 card min-w-fit border-2 bg-gray-100 
          ${
            nft.metadata.id === selectedNFT?.metadata?.id
              ? "border-black scale-105 z-50"
              : "border-transparent"
          }`}
          key={nft.metadata.id}
        >

逻辑说明：

• 点击NFT时，先对比当前NFT的metadata.id和selectedNFT的metadata.id
• 如果两者一致，说明是再次点击已选中的NFT，调用setSelectedNFT(undefined)清空选中状态
• 如果不一致，就把当前NFT设置为选中项，保持原有的选中功能

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