数组map遍历计算数值返回NaN的前端开发问题求助

问题根因 #

你调用calculateTotalReviews方法时传入的第二个参数review.totalNoOfReviews不存在：totalNoOfReviews是定义在顶层customerTotalReviewsData对象下的属性，不属于customerReviews数组内的单条review对象，所以取值为undefined。数值和undefined做除法运算的结果就是NaN。

修复方案 #

调用方法时将第二个参数替换为customerTotalReviewsData.totalNoOfReviews即可：

单独调用示例 #

console.log(calculateTotalReviews(review.valueCount, customerTotalReviewsData.totalNoOfReviews))

遍历渲染组件时的传参示例 #

如果需要在CustomerRatingBar组件内部调用该方法，可以把总评数作为props传入组件：

{customerReviews.map(review => (
    <CustomerRatingBar 
        review={review} 
        totalReviews={customerTotalReviewsData.totalNoOfReviews} 
    />
))}

组件内部调用时直接用传入的totalReviews参数即可：

calculateTotalReviews(review.valueCount, totalReviews)

内容的提问来源于stack exchange，提问作者walker1