Javascript 如何向.map方法添加回调函数

我希望我的函数计算我的购物车的总成本，然后将我的组件状态设置为这些总成本，但我需要先完成计算，然后在计算完成后设置状态。当我运行下面的代码时，状态永远不会被设置

renderCart: function() {

        var newSubtotal = 0;
        var newTotal = 0;

        this.props.cart.map((product)=>{

            newSubtotal += product.price;
            newTotal += product.price;
            newTotal *= 1.10;

            console.log("New Total ", newTotal);
            console.log("New Subtotal ", newSubtotal);

        }, () => {
            this.setState({
              subtotal: newSubtotal,
              total: newTotal
            });
        });


        return (
                    <div>
                        <ul>
                            <li>Subtotal: ${this.state.subtotal}</li>
                            <li>Discount: {this.state.discount}%</li>
                            <li>Tax: {this.state.tax}%</li>
                            <li>Total: ${this.state.total}</li>
                        </ul>
                      <button className="success button">Pay</button>
                    </div>

             ); 

    }

});

renderCart:function（）{
var newSubtotal=0；
var newTotal=0；
this.props.cart.map（（产品）=>{
newSubtotal+=产品价格；
新总额+=产品价格；
新总数*=1.10；
console.log（“新总计”，新总计）；
console.log（“新小计”，newSubtotal）；
}, () => {
这是我的国家({
小计：新闻小计，
总计：新总计
});
});
返回(

小计：${this.state.Subtotal}
折扣：{this.state.Discount}%
税：{本州税}%
总计：${this.state.Total}

支付
); 
}
});

映射是同步的。为什么需要设置状态，请充分使用变量

renderCart: function() {

        var newSubtotal = 0;
        var newTotal = 0;

        this.props.cart.map((product)=>{

            newSubtotal += product.price;
            newTotal += product.price;
            newTotal *= 1.10;

            console.log("New Total ", newTotal);
            console.log("New Subtotal ", newSubtotal);

        });


        return (
                    <div>
                        <ul>
                            <li>Subtotal: ${newSubtotal}</li>
                            <li>Discount: {this.state.discount}%</li>
                            <li>Tax: {this.state.tax}%</li>
                            <li>Total: ${newTotal}</li>
                        </ul>
                      <button className="success button">Pay</button>
                    </div>

             ); 

    }

});

renderCart:function（）{
var newSubtotal=0；
var newTotal=0；
this.props.cart.map（（产品）=>{
newSubtotal+=产品价格；
新总额+=产品价格；
新总数*=1.10；
console.log（“新总计”，新总计）；
console.log（“新小计”，newSubtotal）；
});
返回(

小计：${newSubtotal}
折扣：{this.state.Discount}%
税：{本州税}%
总计：${newTotal}

支付
); 
}
});

映射是同步的。为什么需要设置状态，请充分使用变量

renderCart: function() {

        var newSubtotal = 0;
        var newTotal = 0;

        this.props.cart.map((product)=>{

            newSubtotal += product.price;
            newTotal += product.price;
            newTotal *= 1.10;

            console.log("New Total ", newTotal);
            console.log("New Subtotal ", newSubtotal);

        });


        return (
                    <div>
                        <ul>
                            <li>Subtotal: ${newSubtotal}</li>
                            <li>Discount: {this.state.discount}%</li>
                            <li>Tax: {this.state.tax}%</li>
                            <li>Total: ${newTotal}</li>
                        </ul>
                      <button className="success button">Pay</button>
                    </div>

             ); 

    }

});

renderCart:function（）{
var newSubtotal=0；
var newTotal=0；
this.props.cart.map（（产品）=>{
newSubtotal+=产品价格；
新总额+=产品价格；
新总数*=1.10；
console.log（“新总计”，新总计）；
console.log（“新小计”，newSubtotal）；
});
返回(

小计：${newSubtotal}
折扣：{this.state.Discount}%
税：{本州税}%
总计：${newTotal}

支付
); 
}
});

两点：

您应该使用.reduce函数来计算总和

您不应该在render（）中使用this.setState，我建议使用ComponentDidMount或InitialState

两点：

您应该使用.reduce函数来计算总和

您不应该在render（）中使用this.setState，我建议使用ComponentDidMount或InitialState

---

在伪代码中，组件的结构应该更像：

MyCartTotalComponent => {
  // no need for state: if your props contain cart, then every time cart changes
  // your component gets new props, calculates total, and renders
  render() {
    // calculate stuff and store in local cart variable
    var cart = {};
    cart.total = this.props.cart.reduce(
      function(prev,curr){
        return prev + curr.price;
      },0);
    // render stuff
    return (
      <div>
         ...
         <li>{cart.Total}</li>
         ...
      </div>
    );
  } 
}

MyCartTotalComponent=>{
//不需要状态：如果你的道具包含购物车，那么每次购物车都会改变
//组件获取新道具、计算道具总数并渲染
render（）{
//计算物料并存储在本地购物车变量中
var-cart={}；
cart.total=this.props.cart.reduce(
功能（上一个、当前）{
返回上一个+当前价格；
},0);
//渲染材料
返回(
...
{cart.Total}
...
);
} 
}

在伪代码中，组件的结构应该更像：

MyCartTotalComponent => {
  // no need for state: if your props contain cart, then every time cart changes
  // your component gets new props, calculates total, and renders
  render() {
    // calculate stuff and store in local cart variable
    var cart = {};
    cart.total = this.props.cart.reduce(
      function(prev,curr){
        return prev + curr.price;
      },0);
    // render stuff
    return (
      <div>
         ...
         <li>{cart.Total}</li>
         ...
      </div>
    );
  } 
}

MyCartTotalComponent=>{
//不需要状态：如果你的道具包含购物车，那么每次购物车都会改变
//组件获取新道具、计算道具总数并渲染
render（）{
//计算物料并存储在本地购物车变量中
var-cart={}；
cart.total=this.props.cart.reduce(
功能（上一个、当前）{
返回上一个+当前价格；
},0);
//渲染材料
返回(
...
{cart.Total}
...
);
} 
}

map

不是异步的。看起来您需要

reduce

而不是

map

（也不是异步的）。

map

不是异步的。看起来您需要

reduce

而不是

map

（也不是异步的）。