如何从API中找到一组数字的平均值并显示它.数据是一个对象数组，其中是一个分数数组

Question

所以我击中了一个api，在对象数组中是一个分数数组。我对数据进行映射，但不确定如何在jsx中获得平均成绩并返回它。我试过减少方法，它没有工作，我只是试着潜水的长度，也没有工作。谢谢你的帮助

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

Answer 1

计算平均值的方法有很多，但这是使用reduce的一种方法。

const grades = [50, 40, 70];
const average = grades.reduce((acc, grades) => {
return acc + grades
}, 0) / grades.length;
console.log(average);

答:

53.333333333333336

Answer 2

小猪说到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