Conseils pour utiliser useEffect pour conserver l’état de la couleur d’arrière-plan

Question

J'essaie d'enregistrer la couleur d'arrière-plan du bouton bascule de la liste de souhaits afin que lorsque l'utilisateur se déplace d'une page à l'autre, la couleur du bouton reste "noire" pour montrer à l'utilisateur qu'il a enregistré l'élément dans la liste de souhaits.

const Item = (props) =>
  const dispatch = useDispatch();
  const [arrière-plan, setBackground] = useState(false);

  fonction addToCartHandler (produit) {
    expédition (addToCart (produit));
  }

  fonction basculeWishlistHandler (produit) {
    expédition (toggleItem (produit));
    setBackground((current) => !current);
  }

  retour (
    <div>
      <li className={classes.item}>
        <img src={props.img} alt="Item" className={classes.image} />
        <div className={classes.description}>
          <p className={classes.title}>{props.title}</p>
          <p className={classes.price}>£{props.price}.00</p>
        </div>
        <div className={classes.actions}>
          <div
            className={`${classes.addWishlist} ${classes.icon}`}
            onClick={() => toggleWishlistHandler(props.product)}
            style={{
              backgroundColor : fond "noir" : "orange",
            }}
          >
            <i className="fa-solid fa-heart"></i>
          </div>
          <div
            className={`${classes.addCart} ${classes.icon}`}
            onClick={() => addToCartHandler(props.product)}
          >
            <i className="fa-solid fa-bag-shopping"></i>
          </div>
        </div>
      ≪/li>
    </div>
  );
} ;

exporter l'élément par défaut ;

Answer 1

Vous pouvez enregistrer les couleurs dans le stockage local.

// 检查是否设置为黑色
  const [background, setBackground] = useState(localStorage.getItem('wishlistBackground') === 'black');


// 每当背景颜色发生变化时，将其保存到本地存储中
  useEffect(() => {
    localStorage.setItem('wishlistBackground', background ? 'black' : 'orange');
  }, [background]);