Как я могу передать несколько значений в мою функцию в React?

Question

Я пытаюсь отправить обратно значения продукта с помощью onClick следующим образом:

cart. js:

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

Вот мой редуктор. 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

Давайте писать чисто и лаконично. Вы можете передать весь объект (продукт) вместо передачи (название, количество, цена).

cart. js

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

reducer. 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,

          };