обновление состояния Redux на основе индекса в массиве - PullRequest
Новая
       4

обновление состояния Redux на основе индекса в массиве

1 голос
/ 05 мая 2020

У меня есть приложение для грузовиков с едой, в котором я сохранил заказ клиента в состоянии redux как массив объектов. В каждом заказе указывается каждый элемент, выбранный клиентом. Каждый предмет состоит из количества для этого предмета, названия этого предмета и общей цены предмета, которую вы получаете, умножив количество на цену этого конкретного предмета. Например, это заказ: 

state.order = [
  {item: "chicken taco", count: 2, total: 4},
  {item: "carne asada taco", count: 3, total: 6},
  {item: "horchata", count: 2, total: 5},
  {item: "horchata", count: 1, total: 2.5},
  {item: "carne asada burrito", count: 2, total: 16},
  {item: "buche taco", count: 2, total: 5}
];

В компоненте OrderCard я сопоставляю массив заказов, чтобы отобразить заказ клиента. Счетчик для каждого указанного c элемента отображается как ввод. Я хочу, чтобы пользователь мог изменять счетчик для каждого отдельного элемента. Например, я хочу, чтобы пользователь мог изменить счетчик тако с курицей с 2 ​​до 3. Для этого мне пришлось бы обновить состояние redux, но только для индекса state.order 0, который касается тако с курицей. Как мне go это сделать? Я действительно в растерянности.

Вот код для всего компонента: 

const OrderCard = props => {
    const orderCount = props.order.reduce(function(prev, cur) {
        return prev + cur.count;
    }, 0);

    const countSelect = document.getElementById("count-select");

    const increaseCount = (count) => {
        count++;
    }

    return (
        <Card className="order-card-main">
            <i class="far fa-times-circle" style={{ position: 'relative', left: '0px', textAlign: 'left', width: '100%', marginTop: '3%', fontSize: '1.5rem' }} onClick={() => props.closeOrderCard()}></i>

            <h1 className="order-card-title">Your Order</h1>
            <p className="order-card-truck">from <span className="truck-name">{props.selectedTruck.name}</span></p>

            <div className="order-items-cont">
                {props.order.map(item => (
                    <div className="order-item-div">
                        <p className="order-item-count">
                            <input type="number" value={item.count} className="order-item-count-input" />
                        </p>
                        <p className="order-item-name">{item.item}</p>
                        <p className="order-item-total">{CurrencyFormatter.format(item.total, { currency: 'USD' })}</p>
                        <hr />
                    </div>
                ))}
            </div>

            <input className="order-note-input" type="text" placeholder="Note to truck..." />

            <button className="pay-button">
                <p className="total-items-count">{orderCount}</p>
                <p>Next step: pay</p>
                <p>{
                CurrencyFormatter.format(props.order.reduce(function(prev, cur) {
                    return prev + cur.total;
                }, 0), { currency: 'USD' })
                }</p>
            </button>
        </Card>
    )
}

const mapStateToProps = state => {
    return {
        selectedTruck: state.selectedTruck,
        order: state.order
    }
}

export default connect(mapStateToProps, { closeOrderCard })(OrderCard);

Вот скриншот пользовательского интерфейса для компонента: enter image description here

1 Ответ

1 голос
/ 05 мая 2020

Если порядок элементов гарантирован, вы можете просто обновить этот отдельный элемент в redux по его индексу в коллекции. Вы можете сделать это несколькими способами. Вы также можете присвоить каждой строке заказа уникальный идентификатор, чтобы идентифицировать ее.

Затем вам нужно создать действие redux, которое обновит количество отдельной позиции в состоянии.

Вы можете отправить это действие в событии onChange ввода числа для позиции. Действие потребует 2 аргумента:

  1. индекс позиции или идентификатор или что-то, что однозначно идентифицирует его.
  2. новое количество для этой позиции

Затем в редукторе вы просто находите элемент в массиве и обновляете количество этого элемента.

TLDR; если вы хотите изменить состояние отдельного элемента в списке, затем отправьте действие с этой информацией на редуктор, тогда редуктор будет знать, как обновить состояние.

...