Tipps zur Verwendung von useEffect zur Beibehaltung des Hintergrundfarbstatus

Question

Ich versuche, die Hintergrundfarbe der Schaltfläche zum Umschalten der Wunschliste zu speichern, sodass die Farbe der Schaltfläche „schwarz“ bleibt, wenn der Benutzer über Seiten wechselt, um dem Benutzer anzuzeigen, dass er den Artikel auf der Wunschliste gespeichert hat.

const Item = (props) =>
  const distribution = useDispatch();
  const [Hintergrund, setBackground] = useState(false);

  Funktion addToCartHandler(product) {
    Versand(addToCart(Produkt));
  }

  Funktion toggleWishlistHandler(product) {
    Versand(toggleItem(product));
    setBackground((current) => !current);
  }

  zurückkehren (
    <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)}
            Stil={{
              Hintergrundfarbe: Hintergrund ? „Schwarz“ : „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>
  );
};

Standardelement exportieren;

Answer 1

您可以将颜色保存在本地存储中。

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


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