Javascript 计算react中的总数量和价格

我是一个全新的用户，我在尝试设计一款应用程序时遇到了麻烦。基本上我想要一个产品列表，我可以让用户更新数量，每个数量的总数将显示在产品下面，整个包装的总数将显示在底部。如果有人能帮我，我将不胜感激。我的代码包括在下面`

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

class App extends Component {


  render() {
    /* This is the Counter Part of the App used to denote the quantity of items*/
     class Counter extends React.Component {
      constructor(props) {
        super(props);

        this.state = {
          count: 0
        };
      }

      onUpdate = (val) => {
        this.setState({
          count: val
        });
      };

      render() {

        return (
          <div>
            <CounterChild onUpdate={this.onUpdate} />
            <br />
            <OtherChild passedVal={this.state.count} />
          </div>
        )
      }
    }
    /*Counter Section Ends here*/

    class CounterChild extends Component {
      constructor(props) {
        super(props);

        this.state = {
          count: 0 // Setting the Original State
        };
      }

      increase = e => {
        this.props.onUpdate(e.target.value  = (this.state.count + 1)) // Passed to Other child and Parent
        this.setState({count: this.state.count + 1}); // Setting the New State
      };

      decrease = e => {
        this.props.onUpdate(e.target.value  = (this.state.count - 1))
        this.setState({count: this.state.count - 1});
      };

      render() {
        return (
          <div>
            {this.state.count}<br />
            <button onClick={this.decrease.bind(this)}>-</button>
            <button onClick={this.increase.bind(this)}>+</button>
          </div>
        );
      }
    }

    /* The following is used to load the products list*/
    var products = [["product one", 24.99], ["product two", 9.99]];
    /* products list ends*/

    class OtherChild extends React.Component {
      render() {          
        return (
          <div>
            {this.props.passedVal}
          </div>
        );
      }
    }

    /* This is the section of the app which calculates the price times the quantity*/

    /*Price Section Ends here*/


    /*This section is used to calculate the total that appears at the bottom of the page*/
    var myTotal = 0; // Variable to hold your total

    for (var i = 0, len = products.length; i < len; i++) {
      myTotal += products[i][1]; // Iterate over your first array and then grab the second element add the values up
    }
    /*Total calculation section ends*/


    var productPrice = 0; // Variable to hold your total

    for (var q = 0, pricelen = products.length; q < pricelen; q++) {
      productPrice = products[q][1]; // Iterate over your first array and then grab the second element add the values up
    }




    /*The following section displays the product info in the app one line at a time*/
    class Test extends Component {
      render() {
        var productComponents = this.props.products.map(function(product) {

          return (
            <div className="product">
              {product[0]}<br />
              £{productPrice}<br />
              <Counter />
            </div>
          );
        });
        return <div>
        {productComponents}
        </div>;
      }

    }
    /*Product info display Ends*/

    /*The following section returnd the final output which appears on screen*/
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <div>
          <Test products={products} />
          £{myTotal}
        </div>

      </div>
    );
  }
}

export default App;

import React，{Component}来自“React”；
从“/logo.svg”导入徽标；
导入“/App.css”；
类应用程序扩展组件{
render（）{
/*这是应用程序的计数器部分，用于表示项目的数量*/
类计数器扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
计数：0
};
}
onUpdate=（val）=>{
这是我的国家({
计数：val
});
};
render（）{
返回(


)
}
}
/*柜台部分到此结束*/
类计数器子级扩展组件{
建造师（道具）{
超级（道具）；
此.state={
计数：0//设置原始状态
};
}
增加=e=>{
this.props.onUpdate（e.target.value=（this.state.count+1））//传递给其他子级和父级
this.setState（{count:this.state.count+1}）；//设置新状态
};
减少=e=>{
this.props.onUpdate（e.target.value=（this.state.count-1））
this.setState（{count:this.state.count-1}）；
};
render（）{
返回(
{this.state.count}

-
+
);
}
}
/*以下内容用于加载产品列表*/
var产品=[[“产品一”，24.99]，“产品二”，9.99]；
/*产品清单结束*/
类OtherChild扩展React.Component{
render（）{
返回(
{this.props.passedVal}
);
}
}
/*这是应用程序中计算价格乘以数量的部分*/
/*价格部分到此结束*/
/*此部分用于计算页面底部显示的总数*/
var myTotal=0；//用于保存总数的变量
对于（变量i=0，len=products.length；i
英镑{productPrice}

);
});
返回
{productComponents}
;
}
}
/*产品信息显示结束*/
/*以下部分返回屏幕上显示的最终输出*/
返回(
欢迎反应
英镑{myTotal}
);
}
}
导出默认应用程序；

`

---

如果代码混乱，我道歉，因为我说过我对这方面很陌生。如果您能提供任何帮助，我们将不胜感激。

请查看下面的代码片段，我认为这应该会有所帮助

类应用程序扩展了React.Component{
状态={
产品：[
{标题：“苹果”，计数：0，价格：100}，
{标题：“IBM”，计数：0，价格：200}，
{标题：“HP”，计数：0，价格：300}，
]
}
onChange=（索引，val）=>{
这是我的国家({
产品：this.state.products.map（（产品，i）=>(
i==索引？{…产品，计数：val}：产品
))
})
}
渲染（）{
返回(
)
}
};
const ProductList=（{products，onChange}）=>(

{products.map（（product，i）=>(

{product.title}
onChange（i，parseInt（e.target.value）| | 0）}
/>

))}

);
常量总数=（{products}）=>(
价格：
{乘积.reduce（（总和，i）=>(
总和+=i.计数*i.价格
), 0)}
)
ReactDOM.render（，document.querySelector（'#root'）

谢谢，看起来不错，有没有办法把总输出限制在小数点后2位？是的，这是最重要的答案谢谢你的回答，我在找这行，
{products.reduce（（sum，I）=>（sum+=I.count*I.price），0）