时间戳

首页 > 解决方案 > 如何使用 nextjs 更新状态？

javascript - 如何使用 nextjs 更新状态？

问题描述

我一直在做一个 next.js 项目，我有一个部分充当购物车。当您单击一个项目时，它会将项目图像添加到列表中并呈现所有选定的项目。要删除该项目，您可以单击小图标。单击小图标时，我拼接该列表并更新道具，但在添加另一个项目之前它不会更新。我已经看到了这个问题，但是当我实施它时，它给出了一个错误。我也读过这篇文章，但它也不喜欢那样。我还在此处的代码沙箱上发布了我的项目代码。

var cartImages = [];
export default function Home({ data }) {
    const removeitem = (index) => {
        cartImages.splice(index, 1);
        setCartImg(cartImages);
    };
    const [cartImg, setCartImg] = useState(cartImages);
    return (
    <Popup onClick={removeitem} />);
}

谢谢你的时间！

标签： javascriptreactjsnext.js

解决方案

您的代码框已更新。请查阅。我已经评论了一些代码。基本上，有两个问题。

  1. 删除项目时总计未更新，因为删除项目后未更新总计。
  2. CartImg 状态未反映删除时的更改。

为了解决第一个问题，我更新了removeItem函数来使用和更新状态变量cartImg。

const removeitem = (index) => {
  console.log(index);
  const updated = cartImg.filter((item, idx) => idx !== index); // remove the item based on the index property
  if (!updated.length) setPopup(false);
  setCartImg(updated);
};

还更新了 Popup 组件中的总道具

total={cartImg.reduce((partial_sum, a) => partial_sum + a.price, 0)}

为了解决这两个问题，我更新了cartImg状态以将商品的 url 和价格存储在对象中。cartImg比对数组中项目的总和求和。

推荐阅读