从一个状态传输到另一个状态时，向状态对象添加其他属性和值.[钩子]

Question

我正在构建一个电子商务订餐应用程序。 尝试学习更高级的 React。

我想在用户将多个相同项目添加到订单状态时添加数量增量。

我有一些这样的"产品"：

[
{
"description": "A rich blend, roasted for depth, smoothness and full body our coffee is harvested at the height of the season when the coffee cherry is at perfect ripeness, and sun dried in the fresh mountain air. ",
"price": 4.5,
"SKU": 1,
"name": "Ethiopian"
}
]

单击按钮时，"饮料"将添加到我的order状态。

const [order, setOrder] = useState([]);

使用此函数：

const addToOrder = product => {
setOrder([...order, product]);
};

传输后的状态数据看起来像这样。

[
{
description": "This coffee has been lovingly slow-roasted to develop flavours of smooth milk chocolate and gentle citrus for a soft, easy-going character. It's perfect for weekend relaxation.",
"price": 4.5,
"SKU": 3,
"name": "Kenyan"
}
]

正在调用的函数

<button onClick={() => addToOrder(product)}>Add to Order</button>

我的问题是我想向此订单状态添加一个数量值，以便用户可以订购几种相同的"咖啡"。每次用户添加咖啡时，数量都会增加。

Answer 1

您可以通过SKU进行参考检查。

quantity字段设置为1(一阶( 否则在额外订单上增加。

const addToOrder = product => {
setOrder(prevOrders => (
prevOrders.map(order => (
order.SKU === product.SKU ?
{ ...order, quantity: order.quantity + 1 }
: { ...product, quantity: 1 }
))
));
};

设置数量的另一种方法是通过useState，如果所有产品都在init上获取。

const [order, setOrder] = useState(() => (
props.products.map(product => (
{ ...product, quantity: 1 }
))
);
const addToOrder = product => {
setOrder(prevOrders => (
prevOrders.map(order => (
order.SKU === product.SKU ?
{ ...order, quantity: order.quantity + 1 }
: order
))
));
};