React JSX触发'children属性传入NaN'错误，change5day数组无法正常展示

报错的核心原因 #

你当前共用的calculateAvgValue函数存在硬编码问题：遍历数组累加值时，固定读取每个元素的beta字段参与计算，完全没有适配不同数组的字段差异。

• 当传入beta数组时，数组元素本身就带beta数值字段，累加过程能拿到有效数值，最终算出的平均值是正常数字，渲染自然没有问题
• 当传入change5day数组时，数组元素的数值字段是day5avg，根本不存在beta字段，遍历读取item.beta得到的全是undefined，累加后得到的总和是非数字值，除以数组长度的最终结果就是NaN，把这个NaN直接放到JSX的children位置，就会触发提到的React属性报错。

落地调整方案 #

1. 改造通用计算函数，移除硬编码逻辑
   把需要读取的数值字段名作为函数参数传入，同时增加异常兜底，避免异常值导致计算出NaN：

   // 修正后的可复用计算函数
   const calculateAvgValue = (series, targetField) => {
     // 非数组、空数组场景直接返回0，避免除0错误
     if (!Array.isArray(series) || series.length === 0) return 0
     return series.reduce((sum, item) => {
       // 读取对应字段并转成数值，非有效值按0累加
       const currentVal = Number(item[targetField])
       return sum + (Number.isNaN(currentVal) ? 0 : currentVal)
     }, 0) / series.length
   }
   

2. 调整两处函数的调用入参，匹配对应数组的字段
   • 渲染beta相关的Tooltip内容时，调用改为calculateAvgValue(object.beta, 'beta')，匹配数组元素的beta数值字段
   • 渲染change5day返回值相关的Tooltip内容时，调用改为calculateAvgValue(object.change5day, 'day5avg')，匹配数组元素实际的day5avg数值字段
3. 渲染环节增加兜底处理
   把计算结果转成合法数值后再拼接百分比文本，避免极端场景下的非有效值传入React子节点：

   {/* 渲染示例：保证输出值是合法数字 */}
   <Typography>
     {`${Number(calculateAvgValue(object.change5day, 'day5avg') * 100).toFixed(2)}%`}
   </Typography>
   

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