我正在创建一个最喜欢的 react 列表。我已经能够添加、获取和删除本地存储中的项目。我如何让心形按钮持续存在

Posted 2023-04-14

【中文标题】我正在创建一个最喜欢的 react 列表。我已经能够添加、获取和删除本地存储中的项目。我如何让心形按钮持续存在

【英文标题】：I am creating a favorite list on react. I have been able to add, get and remove the items in localstorage. How do i make the heart button persist

【发布时间】：2021-12-02 23:04:09

【问题描述】：

我正在使用 localstorage 创建一个最喜欢的 react 列表。我已经能够添加、获取和删除localstorage 中的项目。但问题是，在“Works”部分，心形图标在刷新后不会持续存在，即它返回到“不喜欢”图标，即使该项目仍在 Favorites 部分。我使用 react-context 来处理篮子的状态

下面是sn-ps和图片；

Home.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>

Works.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  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>

);

Favorites.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>
</>

);

Checkout the favorite buttons on all works

Checkout the favorites are no longer marked

【参考方案1】：

创建一个状态并将收藏夹保存在那里。

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

每次单击该特定产品的收藏图标时，将其更新为状态。

然后使用“useEffect”

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

现在使用 favProducts 状态确保在页面刷新时点击收藏夹。

【讨论】：

谢谢先生，但请您详细说明一下。我做了一些修改