Question

我有一个食品卡车应用程序，在该程序中，我以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组件中，我通过订单数组进行映射以呈现客户订单。每个特定项目的计数显示为输入。我希望用户能够更改每个单独项目的计数。例如，我希望用户能够将炸玉米饼的数量从2更改为3。为此，我将不得不更新redux状态，但只更新state.order的0索引，该索引涉及炸玉米饼。我将如何去做呢？我真的很茫然。

以下是整个组件的代码：

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);

这是该组件的UI的屏幕截图：

Answer 1

如果可以保证项目的顺序，则可以通过集合中的索引简单地在redux中更新该项目。您可以通过多种方式执行此操作。您还可以为每个订单行指定一个唯一的ID，以进行标识。

然后，您需要创建一个redux操作，该操作将更新状态下单个订单项的数量。

您可以在订单项输入数字的onChange事件中调度此操作。该操作将需要2个参数：

索引或一个ID或唯一标识它的内容。
该订单项的新数量

然后在化简器中，您只需在数组中找到该项目并更新该项目的数量即可。

TLDR；如果您要更改列表中单个项目的状态，然后将带有该信息的操作分派给化简器，则化简器将知道如何更新状态。

根据数组中的索引更新Redux状态

1 个答案: