使用带有材料 UI 的反应钩子的表中列的平均总值

Question

我正在尝试在表格底部显示列的平均值。

这样的行

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>

sandbox上的完整代码

感谢任何帮助

Answer 1

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>
  );
}

Answer 2

我想这应该适合你...

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

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