React组件return()内如何累加多个JSX的price值计算总价

问题原因 #

• 你将let currentTotal = 0直接写在了JSX结构内，没有用{}包裹，这段代码会被React识别为普通文本，不会作为JS变量执行，因此后续访问currentTotal时会提示未定义
• 即使你给变量声明加了{}，JSX大括号内声明的变量作用域仅局限在当前大括号内，外部的JSX节点也无法访问到这个变量

解决方案 #

更合理的写法是在组件的return语句之前提前计算总金额，再放到JSX中渲染，逻辑拆分更清晰，也不会出现作用域问题：

const Basket = ({basket}) =>{
    // 提前计算总金额
    const currentTotal = basket.reduce((sum, cat) => {
        return sum + Math.floor(cat.price)
    }, 0)

    return(
        <div className = "basketWrapper">
            <div className = "paymentWrapper">
                {basket.map((cat, index) => {
                    return(
                        <div className = "catsIN" key={index}>
                            <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;

补充说明 #

• 这里用了数组的reduce方法专门做累加计算，比在map里修改外部变量的写法更规范，避免产生副作用
• 另外给map返回的节点加上了key属性，这是React遍历渲染列表的必填属性，否则控制台会抛出警告

内容的提问来源于stack exchange，提问作者Basil Nagle