如何使用useEffect保存心愿单按钮的背景颜色状态？

你当前用组件内部的useState管理按钮背景色，页面跳转后组件重新挂载，状态会被重置，导致按钮变回橙色。要让状态在页面间保持，得从全局Redux Store里获取商品是否在心愿单的状态，而非依赖组件本地状态。

修改后的代码 #

const Item = (props) => {
  const dispatch = useDispatch();
  // 从Redux Store中获取心愿单列表，根据商品ID判断是否已加入心愿单
  const wishlistItems = useSelector(state => state.wishlist.items); // 请根据你的Store结构调整state路径
  const isInWishlist = wishlistItems.some(item => item.id === props.product.id); // 假设商品有唯一id字段

  function addToCartHandler(product) {
    dispatch(addToCart(product));
  }

  function toggleWishlistHandler(product) {
    dispatch(toggleItem(product));
    // 无需再更新本地状态，Store状态变化会自动触发组件重新渲染
  }

  return (
    <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: isInWishlist ? "black" : "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>
  );
};

export default Item;

补充说明 #

• 核心改动：用useSelector从Redux Store同步心愿单状态，代替组件本地的useState，确保页面跳转后状态不会丢失。
• 可选优化：如果希望页面刷新后心愿单状态依然保留，可以使用redux-persist库将Store数据持久化到本地存储（localStorage/sessionStorage）。

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