无法使用Reactjs获取购物车中所有产品的总金额

Question

做的是：

• 显示了产品列表
• 提供了允许用户添加/删除每个项目的按钮
• 上述按钮将更新每种产品的数量。
• 显示每个产品的小计（价格*数量）

无法弄清楚如何计算所有产品的总和（所有小计的总和），并显示它。以下是我写的代码：

Products.js：

    import React from 'react';
    import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn, } from 'material-ui/Table';
    import PropTypes from 'prop-types';
    import './App.css';


    const btn_style={
        cursor:"pointer"
    }

    // const total=0; 

    export default class Product extends React.Component{
        constructor(props){
            super(props);
            this.state={ count:1,total:0, sub_total:0,
            }
        }

       /* componentDidMount() {
            this.props.setClick(this.calctotal)
         }  */

        addOne() {                                                       // adds one item when button clicked                                  
                this.setState(prevState => {
              return {count : prevState.count + 1 }
             });
            }

           removeOne() {                                                 // removes one item when button clicked
            this.setState(prevState => {
                if(prevState.count>=1) {
              return { count : prevState.count - 1 }
                }
                else{
                    alert('quantity cant be less than zero')
                }
             });
           }


        calc(){
                var subtotal= Number(this.props.price * this.state.count).toFixed(2);
                // this.calctotal();
                console.log('subtotoal is '+ subtotal);
                return subtotal;
              }

// tried to calculate total using this method
         calctotal(){
                    this.setState(prevState => {
                  return { sub_total : prevState.Sub_total + this.calc() } });
                  // console.log('sub_total is'+this.state.subtotal)
              }


        render(){
            return(
                <div>
                    <Table >
                        <TableHeader displaySelectAll={false} adjustForCheckbox={false} >
                            <TableRow>
                                <TableHeaderColumn></TableHeaderColumn>
                                <TableHeaderColumn></TableHeaderColumn>
                                <TableHeaderColumn></TableHeaderColumn>
                                <TableHeaderColumn></TableHeaderColumn>
                            </TableRow>
                        </TableHeader>
                        <TableBody displayRowCheckbox={false} >
                            <TableRow >
                                <TableRowColumn><img src={this.props.src}  width="20" height="20" 
                                    alt={this.props.alt} className="zoom" />
                                 </TableRowColumn>
                                <TableRowColumn>{this.props.name}<br/> {this.props.description}</TableRowColumn>
                                <TableRowColumn id="price_row" >Price per each item:<br/> {this.props.price} <br/>
                                    <p> subtotal is: </p><span id="show_sub" >{ this.calc()}  </span>
                                </TableRowColumn>
                                <TableRowColumn>
                                    <input style={btn_style} type='button' onClick={this.addOne.bind(this)} value='add an item'/>
                                    <input style={btn_style} type='button' onClick={this.removeOne.bind(this)} value='remove an item'/>
                                    <br/> <div> quantity: </div> <div id="qty_div" > {this.state.count}  </div> 
                                </TableRowColumn>
                            </TableRow>
                        </TableBody>
                     </Table>
                </div>
            );
        }
    }

    Product.propTypes={
        name:PropTypes.string,
        price:PropTypes.number,
        description:PropTypes.string,

    };

Cart.js：

import React from 'react';
import Paper from 'material-ui/Paper';
import Product from './Products';


const style = {
    height: 800,
    width: 900,
    margin: 20,
    textAlign: 'center',
    display: 'inline-block',
  };

  let Products=[
    {
        id:1, 
        img_link:"https://staticimg.titan.co.in/production/India/Fastrack/detail2/6150SM04.jpg",
        alt:"Fastrack Women's Watch",
        name:"Fastrack Women's Watch", 
        description:"Analog Pink Dial Women's Watch - 6150SM04",
        price:1800
    },
    {
        id:2,
        img_link:"https://i.ebayimg.com/images/g/4LUAAOSw3YJZVuBu/s-l300.jpg",
        alt:"Yonex Badminton Racquet",
        name:"Yonex Voltric 80 E-tune Badminton Racquet Deep, Red", 
        description:"Frame: H.M. Graphite, NANOMETRIC, Tungsten Shaft: H.M. Graphite, NANOPREM Weight / Grip Size: 4U (Ave.83g) G4,5 3U (Ave.88g) G4,5",
        price:2500
    },
    {
        id:3, 
        img_link:"http://images.fonearena.com/blog/wp-content/uploads/2017/02/Lenovo-Tab-4-10-Plus.jpg",
        alt:"Lenovo Tab 4 Tablet",
        name:"Lenovo Tab 4 10  Tablet  (Slate Black)", 
        description:"16 GB 10.1 inch with Wi-Fi+4G",
        price:6000
    },

];


export default class Cart extends React.Component{

    onClick = () => {
        this.child.calctotal() // do stuff
      }

render(){
    return(
        <div> 
            <Paper style={style} zDepth={1} > 
                <div> 
                    <div>
                        <h3> here are the products ! </h3>
                    </div> <hr/>
                    <div>
                         {Products.map(productlist =>{    
                           return <Product  key={productlist.id} name={productlist.name}
                            description={productlist.description} price={productlist.price}
                            src={productlist.img_link} alt={productlist.alt} />
                        })}   

                   {/*  <div>
                        <Product setClick={click => this.clickChild = click}/>
                        <button onClick={() => this.clickChild()}>Call products total function</button>
                    </div> */}


                    </div>

                </div>

            </Paper>
        </div>
    );
}
}

如果这是一个愚蠢的问题，我很抱歉，但我对这种语言很新。