Question

我正在构建一个模仿电子商务网站的应用程序，但我不知道如何将商品添加到购物车中。

我创建了一个上下文提供程序。它包含一个对象，该对象包含一个数组，用于保存购物车中的所有潜在物品。（我知道我可以只使用数组代替列表，但我打算将其他字段添加到该对象中。）

import React, { createContext, useState } from 'react';

export const CartContext = createContext();

export const CartContextProvider = (props) => {
    const [cart, setCart] = useState({items: []});

    return(
        <CartContext.Provider value={[cart, setCart]}>
            {props.children}
        </CartContext.Provider>
    );
}

接下来，我有一个Item组件。

const Item = ( {item} ) => {

    const [cart, setCart] = useContext(CartContext);

    const handleClick = e => {
        setCart(prevCartItems => ({...prevCartItems, items: items.push(item)}));
    }

    console.log(cart.items);

    return(
        <div className="item">
            <div className="product">
                <h2>{item.name} : ${item.price}</h2>
                <p>Category: {item.category}</p>
            </div>
            <button onClick={handleClick} className="add-to-cart">Add to Cart</button>
        </div>
    );
}

我的困惑尤其在于我正在更新购物车状态的handleClick组件中的Item函数。如何将项目添加到数组？我正在使用spread运算符复制以前的状态，但是如何将“新”项添加到列表中？

Answer 1

useState挂钩的更新功能不具有更新功能。您只需访问cart即可获取当前状态。而且，您不是要复制状态并返回数字的.push，而是要复制数组和.concat的另一个项目，这也可以使用数组扩展语法来完成：

setCart({ ...cart, items: [...cart.items, itemToAdd] });

我不相信那个购物车对象。那我只用多个状态即可。

使用setState更新对象内部的数组

1 个答案: