reactjs 使用reduce获取React电子商务购物篮中的付款总额

wsxa1bj1 于 2022-12-12 发布在 React

关注(0)|答案(5)|浏览(131)

我尝试在reducer中使用selector/ getBasketTotal函数来计算购物车的总价。

export const initialState = {
  basket: []
};

export const getBasketTotal = basket =>
  basket.reduce((amount, item) => item.price + amount, 0);

下面是我在网页中显示总金额的方式：

const [{ basket }, dispatch] = useStateValue();
  return (
    <div className="subtotal">
      <CurrencyFormat
        renderText={value => (
          <>
            <p>
              Subtotal ({basket.length} items): <strong>{value}</strong>
            </p>
            <small className="subtotal__gift">
              <input type="checkbox" />
              This order contains a gift
            </small>
          </>
        )}
        decimalScale={2}
        value={getBasketTotal(basket)}
        displayType={"text"}
      />

通过调用函数getBasketTotal（将购物篮作为参数），该值将显示总金额。
出现的问题是总金额显示为最近添加的项目的价格，而不是购物篮中项目的总金额。有什么方法可以解决此问题吗？

reactjs

来源：https://stackoverflow.com/questions/64747983/using-reduce-to-get-the-total-amount-of-payment-in-react-ecommerce-basket

5条答案

按热度按时间

wj8zmpe11#

检查价格变量。这些变量必须声明为数字而不是字符串

赞(0）回复(0）举报 2022-12-12

8qgya5xd2#

您需要将字符串从购物篮数组转换为数字类型，以获取总价金额

export const getBasketTotal = (basket) => {
    return basket?.reduce((amount, item) => Number(item.price) + amount, 0);
};

赞(0）回复(0）举报 2022-12-12

t5fffqht3#

您的购物篮价格应为：价格={9999999}
大概又道：价格=“9999999”

赞(0）回复(0）举报 2022-12-12

irlmq6kh4#

您应该使用react-hooks。
在您的情况下，useMemo()看起来是正确的。

const [{ basket }, dispatch] = useStateValue();

const getBasketTotal = React.useMemo(() => {
  return basket.reduce((amount, item) => item.price + amount, 0);
}, [basket]);

return { .... }

赞(0）回复(0）举报 2022-12-12

uwopmtnx5#

我认为你的reduce函数是错误的。如果它是一个像{ price：4 }，则应返回一个带有价格键的对象。

basket.reduce((amount, item) => ({ price: item.price + amount.price }));

另一种方法是执行Map前减少以提取价格。

basket.map(x => x.price).reduce((amount, item) => amount+item);

示例代码段

const prices = [
    { price: 3 },
    { price: 4 },
    { price: 5 }
]


console.log('Correct Reduce', prices.reduce((a, b) => ({ price: a.price + b.price })))

console.log('Map before Reduce', prices.map(x => x.price).reduce((a,b) => a+b))

赞(0）回复(0）举报 2022-12-12

我来回答

reactjs 使用reduce获取React电子商务购物篮中的付款总额

5条答案

相关问题

热门标签

最新问答