Reactjs 反应，添加时删除收藏夹

我想知道我可以在箭头函数removeFav中添加什么来让它从收藏夹中删除产品

import React, {  useContext, useState } from "react";
import { Text, Button, Row, Col, Container, Image, ThemeProvider, Div } from "atomize";
import { ShopContext } from "../../context/shopContext";
import { useParams } from "react-router-dom";


const FavoritesPage = () => {



//Remove from favourties 
  const removeFav = () => {
      console.log();
  }

    //Fav
  const [favorites, setFavorites] = useState(JSON.parse(localStorage.getItem("favorites") || "[]"));
    const { addItemToCheckout } = useContext(
        ShopContext
      );
    const favoritesList = favorites.map(product => (
      <Container>

        <div className={"row"} >

        {/* <Row bg="black" rounded="lg" d="flex"
      m="6rem"> */}
        <Div className="prod-img" p="1.5rem">
          <Image src={product.images[0].src} w="20rem" p="2rem"/>
        </Div>
        <div className="prod-size col-12 col-sm-6  " pos="Center" key={product.id}>
        <Text className="title-txt"tag="h1" textColor="white" textWeight="500" m={{ y: "2rem" }} >
            {product.title}
          </Text>
          <Text className="cost-txt" tag="h3" textColor="white" m={{ y: "2rem" }} textWeight="100">
         Price € {product.variants[0].price} Excl Shipping
          </Text>
          <Button
            rounded="lg"
            shadow="3"
            bg="black500"
            m={{ y: "2rem" }}
            onClick={() => addItemToCheckout(product.variants[0].id, 1)}
          >Add to cart
          </Button> 
          {/* Remove from favourties */}
          <Button
            rounded="lg"
            shadow="3"
            bg="black500"
            m={{ y: "2rem" }}
            onClick={() => removeFav(product.variants[0].id, 1)}
          >Remove From Favourites
          </Button> 

        </div>
      {/* </Row> */}
      </div>
    </Container>
    ))

    return favoritesList;
  
};

export default FavoritesPage;

import React，{useContext，useState}来自“React”；
从“原子化”导入{文本、按钮、行、列、容器、图像、ThemeProvider、Div}；
从“../../context/ShopContext”导入{ShopContext}”；
从“react router dom”导入{useParams}；
常数FavoritesPage=（）=>{
//取消优惠
const removeFav=（）=>{
console.log（）；
}
//爱好
const[favorites，setFavorites]=useState（JSON.parse（localStorage.getItem（“收藏夹”）| |“[]”）；
常量{addItemToCheckout}=useContext(
ShopContext
);
const favoritesList=favorites.map（产品=>(
{/*  */}
{product.title}
价格€{产品.变量[0]。价格}不包括运输
addItemToCheckout（product.variants[0].id，1）}
>添加到购物车
{/*从收藏夹中删除*/}
removeFav（product.variants[0].id，1）}
>从收藏夹中删除
{/*  */}
))
返回偏好列表；
};
导出默认收藏夹；

我也有一个产品页面，其中它添加了产品的收藏，如果你需要她这个代码让我知道任何帮助是非常感谢

下面是页面的外观

---

如果您对每个喜爱的项目都有唯一的id，则可以使用此id筛选列表：

const removeFav = (id) => setFavorites(favorites.filter(product => product.id != id));

在“删除”按钮上：

 onClick={() => removeFav(product.id)}

更新：

要更新本地存储，请执行以下操作：

const removeFav = (id) => {
    const newFav = favorites.filter(product => product.id != id);
    setFavorites(newFav);
    localStorage.setItem("favorites", newFav)
}

---

是的，这是可行的，但是当我刷新页面时，由于本地存储的原因，页面仍然会显示，有没有关于如何修复此问题的想法？您也必须更新您的本地存储。因此，您可以使用setFavorites上使用的相同对象。类似于：`const removeFav=（id）=>{const newFav=favorites.filter（product=>product.id！=id）；setFavorites（newFav）；localStorage.setItem（“favorites”，newFav）}`