如何让电商网站心愿单图标在页面跳转/刷新后保持选中状态？

问题根源 #

你用组件本地状态isFilled控制图标显示，但页面刷新或跳转后组件会重新挂载，本地状态会重置为初始值false，而Redux中保存的心愿单数据并未丢失，这就导致图标显示状态和实际心愿单数据不一致。

解决方案 #

1. 导入Redux状态选择器 #

在组件顶部补充导入useSelector，用来获取Redux中存储的心愿单数据：

import { useDispatch, useSelector } from "react-redux";

2. 从Redux初始化图标状态 #

替换原来固定的useState(false)，改为根据当前商品是否在Redux心愿单中，动态初始化isFilled：

// 从Redux获取心愿单列表（路径需匹配你的store结构）
const wishlist = useSelector(state => state.wishlist);
// 根据商品ID判断是否在心愿单中，初始化图标状态
const [isFilled, setIsFilled] = useState(wishlist.some(item => item.id === item.id));

3. 监听心愿单变化同步状态 #

添加useEffect监听Redux心愿单的变化，当心愿单数据更新时自动同步图标状态，保证其他页面操作心愿单后，当前页面图标也能正确显示：

useEffect(() => {
  setIsFilled(wishlist.some(wishItem => wishItem.id === item.id));
}, [wishlist, item.id]);

完整修改后的核心代码片段 #

const Product = ({ item }) => {
  const location = useLocation();
  const [quantity, setQuantity] = useState(1);
  const [product, setProduct] = useState({});
  const dispatch = useDispatch();
  // 获取Redux中的心愿单数据
  const wishlist = useSelector(state => state.wishlist);
  // 根据心愿单初始化图标状态
  const [isFilled, setIsFilled] = useState(wishlist.some(wishItem => wishItem.id === item.id));

  useEffect(() => {
    const getProduct = async () => {
      try {
        const res = await publicRequest.get("/products/find/" + item.id);
        setProduct(res.data);
      } catch {}
    };
    getProduct();
  }, [item.id]);

  // 监听心愿单变化，同步图标状态
  useEffect(() => {
    setIsFilled(wishlist.some(wishItem => wishItem.id === item.id));
  }, [wishlist, item.id]);

  const stockDetail = item.inStock ? "In Stock" : "Out of Stock";

  const handleClick = () => {
    isFilled ? dispatch(removeFromWishlist(product)) : dispatch(wishProduct({ ...product, quantity }));
  };

  const toggleFilledIcon = () => setIsFilled(!isFilled);

  // 原有JSX结构保持不变
  return (
    <div>
      <Container1>
        <Circle />
        <Image src={item.img} />
        <Info>
          <Icon>
            <Link to={`/product/${item.id}`}>
              <SearchOutlined />  
            </Link>
          </Icon>
          <Icon onClick={(event)=>{
              event.preventDefault();
              event.stopPropagation();
              toggleFilledIcon();
              handleClick();
            }}>
            { isFilled ? <Favorite style={{ color: 'crimson' }} /> : <FavoriteBorderOutlined /> }
          </Icon>
        </Info>
      </Container1>
      <Container2>
        <Title>{item.title}</Title>
        <Span className="price">₹{item.price}</Span>
        <Span className="stock">{stockDetail}</Span>
      </Container2>
    </div>
  );
};

关键提示 #

• 确保useSelector中获取wishlist的路径和你的Redux store结构一致，比如若你的心愿单数据存在state.wishlist.items，就要把路径改成state.wishlist.items。
• 核心逻辑是让图标状态依赖Redux的全局数据，而非组件本地状态，这样页面刷新或跳转后，组件能从Redux中读取最新的心愿单状态，正确渲染图标。

内容的提问来源于stack exchange，提问作者Hasnain Abbas Tinwala