reactjs - 如何在反应中将多个值传递给我的函数？

Question

我正在尝试使用 onClick 发回产品值，如下所示：

购物车.js：

<RemoveButton
    type="submit"
    onClick={() => deleteItem(product.title, product.quantity, product.price)}
>
    Remove
</RemoveButton>

这是我的 reducer.js：

case DELETE_SOME_ITEM:
    let items = state.products.filter(itemDelete => itemDelete.title === action.payload);
    console.log(action.payload);
    return {
        ...state,
        products: items,
            cartCost: state.cartCost - items.price,
            basketNumbers: state.basketNumbers - items.quantity,

    };

当我这样做console.log(action.payload)时，只是控制台product.title而不是 product.quantity 和 price

如果您想查看它，这是我的 github 项目：

https://github.com/nathannewyen/the-beuter

Answer 1

错别字，应该是

<RemoveButton
    type="submit"
    onClick={() => deleteItem({title: product.title, quantity: product.quantity, price: product.price})} // this should be an object, currently you are passing 3 parameters, so payload only have the 1st parameter
>
    Remove
</RemoveButton>

Answer 2

让我们以简洁明了的方式编写。您可以传递完整的对象（产品）而不是传递（标题、数量、价格）。

购物车.js

<RemoveButton
    type="submit"
    onClick={() => deleteItem(product)}>
    Remove
</RemoveButton>

减速器.js

case DELETE_SOME_ITEM:
    let items = state.products.filter(itemDelete => itemDelete.title === action.payload.title);
    console.log(action.payload);
    return {
        ...state,
        products: items,
            cartCost: state.cartCost - items.price,
            basketNumbers: state.basketNumbers - items.quantity,

          };