时间戳

首页 > 解决方案 > 根据数组中的索引更新 Redux 状态

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

问题描述

我有一个食品卡车应用程序，我将客户订单以 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 组件中，我映射订单数组以呈现客户订单。每个特定项目的计数显示为输入。我希望用户能够更改每个单独项目的计数。例如，我希望用户能够将鸡肉 taco 计数从 2 更改为 3。为此，我必须更新 redux 状态，但仅更新 state.order 的 0 索引，该索引与鸡肉 tacos 有关。我该怎么做呢？我真的很茫然。

这是整个组件的代码：

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 屏幕截图： 在此处输入图像描述

标签： javascriptarraysreactjsreduxstate

解决方案

如果项目的顺序得到保证，您可以简单地通过集合中的索引更新 redux 中的单个项目。您可以通过多种方式做到这一点。您还可以给每个订单行一个唯一的 ID 来识别它。

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

onChange您可以在为订单项输入数字的情况下调度此操作。该操作需要 2 个参数：

  1. 订单项的索引或id 或唯一标识它的东西。
  2. 该行项目的新数量

然后在 reducer 中，您只需在数组中找到该项目并更新该项目的数量。

TLDR；如果您想改变列表中单个项目的状态，然后将包含该信息的操作发送到减速器，那么减速器将知道如何更新状态。

推荐阅读