javascript - 如何从 return() 中汇总多个 JSX 价格？

Question

我在 React 中有一个组件，它接收一个包含多个对象的 cat 数组。在这些对象中的每一个中，都有一个 .price 属性。

我希望做的是将所有这些价格加起来并在同一个组件中打印一次。

这是我尝试过的：

const Basket = ({basket}) =>{
    return(

        <div className = "basketWrapper">
            <div className = "paymentWrapper">
            let currentTotal = 0;
                {basket.map((cat, index) => {
                    
                    currentTotal += Math.floor(cat.price);
                    return(

                        <div className = "catsIN">
                            <h2>Cat: {cat.name}</h2>
                            <p>{cat.name} is: £{cat.price}</p>
                        </div>
                    )
                })
                    
                }
                    <div>
                        <h4>Your total is: £{currentTotal}</h4>
                    </div>               
            </div>
        </div>
    );
}

export default Basket;

但是，当我运行它时，它返回一个未定义 currentTotal 的错误。我知道它超出了地图功能范围，但我现在不确定如何实现这一点。刚刚与 react 合作了一段时间。

标签： javascriptreactjs

Answer 1

您的代码实际上从未currentTotal像在您的 dom 中那样设置变量。

另外，我会使用该reduce函数来计算总价，这里是对代码的更改，以使其工作。

const Basket = ({basket}) =>{
    let currentTotal = basket.reduce((c, t) => Math.floor(c.price) + t, 0 );
    return(

        <div className = "basketWrapper">
            <div className = "paymentWrapper">
            
                {basket.map((cat, index) => {
                    return(

                        <div className = "catsIN">
                            <h2>Cat: {cat.name}</h2>
                            <p>{cat.name} is: £{cat.price}</p>
                        </div>
                    )
                })
                    
                }
                    <div>
                        <h4>Your total is: £{currentTotal}</h4>
                    </div>               
            </div>
        </div>
    );
}

export default Basket;