如果 Reactjs 的數據庫中存在項目，如何更改願望清單圖標顏色？

Question

如果該項目存在於數據庫中，我如何更改願望清單圖標顏色，其顏色為棕色 如果該項目不存在於數據庫中，其顏色為黑色。

而且我還可以在 colors 之間切換。 這意味着（如果數據庫中存在一個項目，當我單擊圖標時，它返回的顏色已經改變，它的顏色應該改變並返回黑色，並且該項目從數據庫中刪除）。 當我再次單擊該圖標時，它應該發送一個請求並將該項目添加到數據庫中，並且返回的顏色再次為棕色。

如果你還沒有理解問題，問我！ 和（從數據庫返回的項目正確無誤，其值存儲在 [itemPresent] 掛鈎中）

import React, { useState,useCallback,useEffect } from 'react'
import { useParams } from "react-router-dom";
import { connect } from 'react-redux';
import { BsDash, BsPlus } from "react-icons/bs";
import axios from '../../axios-orders';
import Spinner from '../../components/UI/Spinner/Spinner'
import {RiHeart3Fill} from 'react-icons/ri';



const Details = (props) => {
    
    const { id } = useParams();

    const [toggleHeart, setToggleHeart] = useState(false);
    const [itemPresent, setItemPresent] = useState('');

    useEffect(()=>{
        axios.post('/UserPortal/CartItems/get_wishlist.php', {
            customer_id: localStorage.getItem('Id')
        } )
        .then((response) => {
          console.log(response.data);
         response.data.map((item)=>{
            return setItemPresent(item.product_id)
        })
    
        if(itemPresent === id){
            console.log('[item]',itemPresent)
        }
        })
    },[toggleHeart,id,itemPresent])


    var c = props.orders.find(product => product.id === id);

    

    const changeColor = useCallback(() =>{
        setToggleHeart(!toggleHeart);
        const data = {
            customer_id: localStorage.getItem('Id'),
            name: c.name,
            price: c.price,
            description: c.description,
            quantity: c.quantity,
            product_id : c.id
        }
        axios.post('/UserPortal/CartItems/wishlist.php', data )
            .then((response) => {
              console.log(response.data);
            })
       },[toggleHeart,c.id,c.name,c.price,c.description,c.quantity])


   if(props.orders.length === 0){
    return <Spinner/>;
   }

 return (
                <div className="details__info">
                              
                                {localStorage.getItem('email') 
                                ? itemPresent ? 

                                 <RiHeart3Fill className={
                                    toggleHeart ? 'heart active' : 'heart'
                                  } onClick={changeColor}/>

                                :   <RiHeart3Fill className="heart" onClick={changeColor}/>
                                :   <RiHeart3Fill className="heart"/>

               }
                                </div>
                      
   
                  );

CSS 文件

.heart{
    font-size: 35px;
    color:rgb(182, 173, 173);
    margin-top: 7px;
     width: 70px;
     outline: none;
     text-transform: uppercase;
     cursor: pointer;
     font-weight: bold;
     &:hover{
         color: rgb(192, 39, 39);
     }
    &.active {
        color: rgb(192, 39, 39);
    }
 }

Answer 1

您可以在 useState 掛鈎中定義 css 類，並在添加或刪除項目后對其進行更新。

以下是您可以嘗試看看是否對您有幫助的代碼建議，

const [cssClass, setCssClass] = useState("heart")


useEffect(() => 
{
  if(toggleHeart)
  {
    setCssClass("heart active")
  }
  else
  {
    setCssClass("heart")
  }


},[toggleHeart])




 return (
 <div className="details__info">
                              
 {localStorage.getItem('email') 
 ? itemPresent ? 

 <RiHeart3Fill 
  className={cssClasses} 
  onClick={changeColor}
  />

  :   <RiHeart3Fill className="heart" onClick={changeColor}/>
  :   <RiHeart3Fill className="heart"/>

  }
  </div>
                      
   
 );