Блог

Я создаю список избранных с помощью react localstorage . Я смог добавлять, получать и удалять элементы внутри localstorage . Но проблема Works в том, что в разделе «значок в форме сердца не сохраняется после обновления, т. е. он возвращается к значку «Не избранное«, даже если элемент все еще находится в Favorites разделе. Я использовал react-контекст для обработки состояния корзины

Ниже приведены фрагменты и изображения;

Главная страница.jsx

     <div className="works-gallery">
      {allWorks.map((work, index) => {
        return (
          <Works
            key={work.id}
            id={work.id}
            img={work.img}
            category={work.category}
          />
        );
      })}
    </div>
  </section>
 

Работает.jsx

 function handleClick() {
setToggl(!toggl);
if (!toggl) {
  setIcon(<Favorite style={{ color: "black", cursor: "pointer" }} />);
  addToBasket();
} else {
  setIcon(
    <FavoriteBorderIcon
      style={{ color: "rgba(0, 0, 0, 0.726)", cursor: "pointer" }}
    />
  );
  removeFromBasket();
}
 

}

 .
.
.
return (
<div className="works-div">
  <div
    onClick={() => {
      props.viewThisProject(props.id);
    }}
  >
    <img src={props.img} alt="" className="works-img" />
    <div className="overlay">
      <RemoveRedEye titleAccess="VIEW PROJECT" />
    </div>
  </div>

  <article className="work-info">
    <div className="category-div">
      <p>{props.category}</p>
      <div></div>
    </div>

    <div className="fav-btn btns" onClick={handleClick}>
      {icon}
    </div>
  </article>
</div>
 

);

Избранное.jsx

 function Checkout(props) {
  const [{ basket }] = useStateValue();
  const [contactDiv, setContactDiv] = useState();

  useEffect(() => {
    localStorage.setItem("favorites", JSON.stringify(basket));
  }, [basket]);

  function displayContactDiv() {
setContactDiv(
  <Contact
    containerClass="checkout-contactDiv"
    container2="checkout-contactDiv2"
    close="Close"
    closeClass="checkout-contact-close-btn "
    onClose={Close}
  />
    );
 }
  function Close() {
    setContactDiv();
  }

  return (
   <>
  <MyFavNavbar onDisplayContactDiv={displayContactDiv} />
  <div className="main-contactDiv-body">{contactDiv} </div>

  <div className="checkout">
    <div className="checkout-left">
      <div className="checkout-ad">
        <p>My Favorites</p>
      </div>

      {basket?.length === 0 ? (
        <div>
          <h2>Your Favorites Section Is Empty</h2>
          <p>
            You have no favorite. To add one or more favorite work(s) simply
            click on the 'heart' icon next to the item{" "}
          </p>
        </div>
      ) : (
        <div>
          <h2 className="checkout-title">My Favorite Designs</h2>

          {/* list out all the checkout products */}
          <div className="works">
            {basket.map((work, index) => {
              return (
                <FavoriteWork
                  key={work.id}
                  id={work.id}
                  img={work.img}
                  category={work.category}
                />
              );
            })}
          </div>
        </div>
      )}
    </div>
  </div>
</>
 

);
}

Проверьте любимые кнопки на всех работах

Проверка избранное больше не помечено

Создайте состояние и сохраните избранное там.

 const [favProducts , setFavProducts] = useState([])
 

Каждый раз, когда вы нажимаете на значок избранного для этого конкретного продукта, обновляйте его до состояния.

А затем используйте «Эффект использования».

 useEffect(() => {
   yourFunction()
},[favProducts])
 

А теперь используйте состояние Избранные продукты, чтобы убедиться, что избранное нажато во время обновления страницы.