Reactjs 使用带有材质UI的react挂钩的表中列的平均总值

我试图在表的底部显示列的平均值

像这样的排

const rows = [
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0), 
  createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
  createData("Eclair", 262, 16.0, 24, 6.0),
  createData("Cupcake", 305, 3.7, 67, 4.3),
  createData("Gingerbread", 356, 16.0, 49, 3.9)
];

并通过行进行映射

<TableCell>
        {rows.map((row) => (
          <TableCell align="right">
            {row.calories} 
          </TableCell>
        ))}
      </TableCell>
      <TableCell>
        total array: {rows.length} <br />
      </TableCell>

{rows.map（（row）=>(
{row.carries}
))}
总数组：{rows.length}

完整代码

---

感谢您的帮助

我想这应该适合您

var average_cal = 0; // Average Calories

var total_cal = 0; // Total Calories

forEach(var row in rows){
 total_cal = total_cal + row.calories ; // Finding the Total Calories
}

avrage_cal = total_cal / rows.length; // Calculating the average claories

<TableCell>{average_cal}</TableCell> // Display the result in the cell

var平均值=0；//平均卡路里
var total_cal=0；//卡路里
forEach（行中的变量行）{
total_cal=total_cal+row.carries；//查找总热量
}
avrage\u cal=总计\u cal/rows.length；//计算平均值
{average_cal}//在单元格中显示结果

注意：您可以在适当的位置添加代码。这只是想了解如何计算一列的平均值。您可以对所有列执行相同的操作。

从“React”导入React；
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";

const useStyles = makeStyles({
  table: {
    minWidth: 650
  }
});

const rows = [
  { name: "Frozen yoghurt", calories: 159, fat: 6.0, carbs: 24, protein: 4.0 },
  {
    name: "Ice cream sandwich",
    calories: 237,
    fat: 9.0,
    carbs: 37,
    protein: 4.3
  },
  { name: "Eclair", calories: 262, fat: 16.0, carbs: 24, protein: 6.0 },
  { name: "ICupcake", calories: 305, fat: 3.7, carbs: 67, protein: 4.3 }
];

var average_cal = 0; // Average Calories

var total_cal = 0; // Total Calories

const calories = rows.map((row) => (total_cal += row.calories));

console.log(calories);

var tot = 0;
for (var i = 0; i < rows.length; i++) {
  if (parseInt(rows[i].calories)) tot += parseInt(rows[i].calories);
  average_cal = tot / rows.length;
}
total_cal = tot;
//average_cal = total_cal / rows.length;

// avrage_cal = rows.map(row=> total_cal / rows.length);

export default function BasicTable() {
  const classes = useStyles();

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Average Cals</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{average_cal}</TableCell>
            </TableRow>
          ))}
          <TableCell>
            <TableCell align="right">Total Calories: {total_cal}</TableCell>
          </TableCell>
          <TableCell>
            total array: {rows.length} <br />
          </TableCell>
        </TableBody>
      </Table>
    </TableContainer>
  );
}

从“@material ui/core/styles”导入{makeStyles}”；
从“@物料界面/核心/表格”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableContainer”导入TableContainer；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
const useStyles=makeStyles({
表:{
最小宽度：650
}
});
常量行=[
{名称：“冷冻酸奶”，卡路里：159，脂肪：6.0，碳水化合物：24，蛋白质：4.0}，
{
名称：“冰淇淋三明治”，
卡路里：237，
fat:9.0，
碳水化合物：37，
蛋白质：4.3
},
{名称：“Eclair”，卡路里：262，脂肪：16.0，碳水化合物：24，蛋白质：6.0}，
{名称：“ICupcake”，卡路里：305，脂肪：3.7，碳水化合物：67，蛋白质：4.3}
];
var average_cal=0；//平均卡路里
var total_cal=0；//卡路里
常量卡路里=行.map（（行）=>（总热量+=行.carries））；
console.log（卡路里）；
var-tot=0；
对于（变量i=0；itotal\u cal/rows.length）；
导出默认函数BasicTable（）{
const classes=useStyles（）；
返回(
甜点（100克）
卡路里
脂肪（g）
平均CAL
{rows.map（（row）=>(
{row.name}
{row.carries}
{row.fat}
{平均值_cal}
))}
总热量：{Total_cal}
总数组：{rows.length}

);
}

如果此代码对您有效，请将此标记为已接受的答案您好，感谢您的回复我收到意外的令牌错误

forEach（var row in rows）{@arole意外的令牌可能意味着您在某个地方丢失了一个结束“}”。很高兴。您犯了一些错误。-首先，该对象在数组中没有清晰的数据。Javascript不够清晰。{name:“Eclair”，卡路里：262，脂肪：16.0，碳水化合物：24，蛋白质：6.0}但是你做的最酷的事情是分享代码笔链接。如果有帮助的话，请接受我的正确答案