如何在Next.js项目中正确更新购物车列表的state？

• 你调用splice修改的是原数组本身，该方法会直接变更原数组的内存引用，后续你把同一个引用的数组传给setCartImg时，React浅比较会判定状态未发生变化，因此不会触发页面重渲染，只有后续新增商品生成新数组引用时才会更新视图。
• 你将cartImages声明在组件外部作为全局变量，若存在多个组件实例会出现状态互相污染的问题。

修改removeitem方法，删除元素时生成全新的数组，不要修改原有状态数组：

export default function Home({ data }) {
    // 初始值直接传入空数组即可，无需额外声明全局变量
    const [cartImg, setCartImg] = useState([]);
    const removeitem = (index) => {
        // 方案1：用filter生成新数组，直接过滤对应索引的元素
        setCartImg(prev => prev.filter((_, i) => i !== index));
        
        // 方案2：先拷贝原数组再splice，同样可以生成新数组
        // setCartImg(prev => {
        //   const newCart = [...prev];
        //   newCart.splice(index, 1);
        //   return newCart;
        // })
    };
    return (
        <Popup onClick={removeitem} />
    );
}

内容的提问来源于stack exchange，提问作者Travis C