我正在嘗試計算字母并將其顯示在表格中。現在該表可以作業，但是行太多并且計數不正確。
| 一種 | 2 |
|---|---|
| 乙 | 3 |
| C | 1 |
我怎樣才能使輸出看起來像這樣？
import {
Paper,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow
} from "@material-ui/core";
import "./styles.css";
const letters = ["A", "A", "B", "B", "B", "C"];
const Row = (letter: string) => (
<TableRow>
<TableCell>{letter}</TableCell>
<TableCell>{letters.lastIndexOf(letter)}</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>{letters.map(Row)}</TableBody>
</Table>
</TableContainer>
</div>
);
}
uj5u.com熱心網友回復：
lastIndexOf 回傳元素最后一次出現的索引位置，因此計數關閉。我建議你在映射之前找到每個字母的頻率。
這樣做的一種潛在方法如下（取自這個問題）：
const letters = ["A", "A", "B", "B", "B", "C"];
const counts = {};
for (const letter of letters ) {
counts[letter ] = counts[letter ] ? counts[letter ] 1 : 1;
}
所以現在您可以通過執行以下操作來訪問每個字母的計數：
<TableCell>{counts[letter]}</TableCell>
此外，由于您正在映射原始字母陣列，因此行數太多，因此每次出現字母都會有一行。
假設您為事件創建了一個物件，您可以使用以下方法映射它：
Object.keys(counts).map
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/366087.html