所以我點擊了一個 api，在物件陣列中是一個等級陣列。我正在映射資料，但不確定如何獲得平均成績并在 jsx 中回傳。我嘗試了它沒有用的 reduce 方法，我只是嘗試了它也不起作用的長度。我感謝任何幫助
data.map( ( element, index ) => {
return (
<div key={index} className="person-card" >
<div><img src={element.pic} alt="pic" />
</div>
<div>
<h2>
<strong>{element.firstName} {element.lastName}</strong>
</h2>
</div>
<div className="email">
Email: {element.email}
</div>
<p> Company: {element.company}</p>
<p>Skill: {element.skill}</p>
</div>
)
} )}
uj5u.com熱心網友回復：
可能有很多方法來計算平均值，但這是使用reduce.
const grades = [50, 40, 70];
const average = grades.reduce((acc, grades) => {
return acc grades
}, 0) / grades.length;
console.log(average);
回答：
53.333333333333336
uj5u.com熱心網友回復：
Piggy Backing off Jagrut，reduce 是尋找數字總和的平均值的最可行的選擇。我相信您對他的解決方案的執行可能是 reduce 對您不起作用的原因。這是一個使用樣本資料陣列來查找平均成績的示例。您沒有為我們提供資料在您映射的陣列中的外觀示例，因此我不得不猜測。
const apiData = [
{ grades: [50, 60, 90], name: "billy" },
{ grades: [40, 80, 100], name: "jimmy" },
{ grades: [30, 50, 90], name: "Sam" }
];
export default function App() {
const [data] = useState(apiData);
return (
<div className="App">
{data.map((item, index) => {
const average =
item.grades.reduce((a, b) => {
return a b;
}, 0) / item.grades.length;
const roundedAverage = Math.floor(average);
return (
<>
<div>Name: {item.name}</div>
<div>average grade: {roundedAverage}</div>
</>
);
})}
</div>
);
}
要查看它的實際效果，還有一個代碼沙箱：https : //codesandbox.io/s/misty-paper-g2nfr?file=/ src/ App.js
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/339342.html
標籤：javascript 反应 jsx
上一篇：將物件陣列轉換為另一個物件陣列