Question

我在React / redux中有一个带有我的计算结果的产品。

在我的redux状态下，单个产品的价格为400，单个产品的数量为1，

因此，我从1-10创建了一个选择输入，用于更新我的redux商店中的单个产品数量状态。现在，只要用户选择1到10之间的数字，该数字就会自动更新单个产品的数量。很好，效果很好！

现在的问题是，数量更新后，我无法更新产品价格?

例如，如果用户在第一次运行中选择6作为数量，则效果很好，但是如果用户决定将数量从6更改为2或5，则产品价格将自动将产品价格更新6×2 ×5。

无论如何我都可以这样做，所以只要用户选择一个选项，它就会乘以初始产品价格状态，而不是使用新创建的状态。拜托！

购物车组件中的状态

     const quantityNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
      const [qtyValue, setQtyValue] = useState();
      const [totalProductPrice, setTotalproductPrice] = useState(data.newPrice);
const selectQuantityNumber = quantityNumbers.map((num) => (
    <Option value={num}>{num}</Option>
  ));

选择组件

         <Select
          labelInValue
          defaultValue={{ value: data.units }}
          style={{
            width: "50px",
            backgroundColor: "transparent",
            border: "0",
          }}
          onChange={selectUnitHandle}
          bordered={false}
        >
          {selectQuantityNumber}
        </Select>

选择功能

     const selectUnitHandle = (e) => {
            setQtyValue(e.value);
          };
//updateQty function is Set for dispatching redux action for choosing qty and updating single product price

    function updadeQty(item, qty, price) {
    qty = qtyValue;
    price = totalProductPrice;
    dispatch(chooseQty(data, qtyValue));
    setTotalproductPrice(data.newPrice * qtyValue);
    dispatch(UpdateSinglePrice(data, qty, price));
  }

我用于降低产品价格的减价器

case "UPDATE_SINGLE_PRICE": {
  let newItemPrice;
  let newItemQty;
  let updatedItem = state.cartItems.find(
    (prd) => action.item.id === prd.id
  );
  if (updatedItem) {
    newItemPrice = action.price;
    newItemQty = action.unit;
    updatedItem.newPrice = newItemPrice * newItemQty;
  } else return { ...state };
}

Answer 1

避免更改商店中的默认价格，即取消更改商店中价格值的那部分代码，而应将渲染时的价格值计算为：

item.price * item.qty

您在商店中需要更新的全部是物品数量，让他们保持物品价格不变。这样可以解决（并简化）总价格问题。

更新单一产品价格的问题reactjs / redux

1 个答案: