如何使用 nextjs 更新状态？ [复制]

Posted 2023-02-22

【中文标题】如何使用 nextjs 更新状态？ [复制]

【英文标题】：How to update a state using nextjs? [duplicate]

【发布时间】：2021-11-14 12:38:24

【问题描述】：

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

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 />);

谢谢你的时间！

【问题讨论】：

请在问题本身内包含必要的代码。异地支持很好，但主要代码应该在这里。

好的！我将编辑我的问题

但是，splice 改变了原始数组，这意味着你正在改变状态。这就是您看不到重新渲染的原因。

是否有任何特定的用例，您在函数组件外部使用cartImages 变量来管理图像网址？

我认为你所说的为我指明了正确的方向，但我认为我遇到了下一个问题，当我在点击事件上插入 this.removeitem 时，它说cannot read property of removeitem我删除了它说的 const 部分 removeitem is undefined

【参考方案1】：

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

Total 未在删除项目时更新，因为在删除项目后未更新总数。 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 状态以在对象中存储商品的网址和价格。比 cartImg 数组中的项目总和。