Javascript 访问购物车数据对象以创建总金额

我正在为列表购物车项目创建一个数组，效果很好，但我想知道如何访问每个项目属性来创建表项目之外的订单总额

                    <Table className={classes.table} aria-label="simple table">
                        <TableHead>
                            <TableRow>
                                <TableCell className={classes.hideOnMobile}>
                                </TableCell>
                                <TableCell>PRODUCTO</TableCell>
                                <TableCell>PRECIO</TableCell>
                                <TableCell align="center">CANTIDAD</TableCell>
                                <TableCell align="right">TOTAL</TableCell>
                                <TableCell align="right"></TableCell>
                            </TableRow>
                        </TableHead>
                        <TableBody>
                            {data.map((row) => (
                                <Item data={row} {...props} />
                            ))}
                        </TableBody>
                    <TableFooter className={classes.table}>
                        <TableCell>
                        </TableCell>
                        <TableCell align="right">TOTAL ORDER</TableCell>
                        <TableCell align="left">"TOTAL GOES HERE"</TableCell>
                    </TableFooter>
                    </Table>

---

我会在组件中的某个地方有一个

total

变量（在本例中是一个类属性，如果您使用的是功能组件，则很可能只是一个变量），并在循环数据时累积总计。这样，您只需在数据集上循环一次。大概是这样的：

class App extends React.Component { 

 data = {/* your data */}
 total = 0;

render() {
 return (
  <Table className={classes.table} aria-label="simple table">
    <TableHead>
      <TableRow>
        <TableCell className={classes.hideOnMobile}>
        </TableCell>
        <TableCell>PRODUCTO</TableCell>
        <TableCell>PRECIO</TableCell>
        <TableCell align="center">CANTIDAD</TableCell>
        <TableCell align="right">TOTAL</TableCell>
        <TableCell align="right"></TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {this.data.map((row) => (
       this.total += row.total;
       return <Item data={row} {...props} />
       ))}
     </TableBody>
     <TableFooter className={classes.table}>
       <TableCell>
       </TableCell>
       <TableCell align="right">TOTAL ORDER</TableCell>
       <TableCell align="left">{this.total}</TableCell>
     </TableFooter>
   </Table>
  );
}

类应用程序扩展了React.Component{
数据={/*您的数据*/}
总数=0；
render（）{
返回(
产品
普里西奥
康蒂达
全部的
{this.data.map（（行）=>(
this.total+=row.total；
返回
))}
总订单
{这个总数}
);
}

class App extends React.Component { 

 data = {/* your data */}
 total = 0;

render() {
 return (
  <Table className={classes.table} aria-label="simple table">
    <TableHead>
      <TableRow>
        <TableCell className={classes.hideOnMobile}>
        </TableCell>
        <TableCell>PRODUCTO</TableCell>
        <TableCell>PRECIO</TableCell>
        <TableCell align="center">CANTIDAD</TableCell>
        <TableCell align="right">TOTAL</TableCell>
        <TableCell align="right"></TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      {this.data.map((row) => (
       this.total += row.total;
       return <Item data={row} {...props} />
       ))}
     </TableBody>
     <TableFooter className={classes.table}>
       <TableCell>
       </TableCell>
       <TableCell align="right">TOTAL ORDER</TableCell>
       <TableCell align="left">{this.total}</TableCell>
     </TableFooter>
   </Table>
  );
}