如何使用Material UI在React表格中正确统计并展示字母出现次数

问题根源 #

你的代码存在两个核心问题：

• 行数过多：直接遍历包含重复元素的原始letters数组渲染行，每个数组元素都会生成一行，自然会出现重复字母的行
• 计数错误：lastIndexOf(letter)返回的是该字母最后一次出现的下标（从0开始计数），本身就不是统计出现次数的逻辑，结果自然不符合预期

修改思路 #

先对原始数组做统计聚合，生成去重的、包含每个字母对应出现次数的数组，再遍历这个聚合数组渲染表格行即可。

调整后完整代码 #

import {
  Paper,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow
} from "@material-ui/core";
import "./styles.css";

const letters = ["A", "A", "B", "B", "B", "C"];

// 统计每个字母的出现次数，生成聚合数组
const letterStats = Object.entries(
  letters.reduce((acc, cur) => {
    acc[cur] = (acc[cur] || 0) + 1;
    return acc;
  }, {})
).map(([letter, count]) => ({ letter, count }));

// 调整Row组件入参，接收统计对象
const Row = ({ letter, count }: { letter: string; count: number }) => (
  <TableRow>
    <TableCell>{letter}</TableCell>
    <TableCell>{count}</TableCell>
  </TableRow>
);

export default function App() {
  return (
    <div className="App">
      <TableContainer component={Paper}>
        <Table sx={{ minWidth: 650 }} aria-label="simple table">
          <TableHead>
            <TableRow>
              <TableCell>letter</TableCell>
              <TableCell>count</TableCell>
            </TableRow>
          </TableHead>
          {/* 遍历聚合后的统计数组，而不是原始数组 */}
          <TableBody>{letterStats.map((stat) => <Row key={stat.letter} {...stat} />)}</TableBody>
        </Table>
      </TableContainer>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Kumar Venkata Uppala