时间戳

首页 > 解决方案 > 错误：“收到 `children` 属性的 NaN。如果这是预期的，请将值转换为字符串。”

javascript - 错误：“收到 `children` 属性的 NaN。如果这是预期的，请将值转换为字符串。”

问题描述

尝试显示数组字典数组中的数据时，标题中出现错误。这仅发生在change5day数组中。其他数组正在我的 JSX 中复制它们的值。下面我展示了我如何实现工作示例然后不工作。

beta: Array(8) //This object works fine!
0: {symbol: "AAL", beta: 1.5533897423778862}
1: {symbol: "AAPL", beta: 1.2504351069178914}
2: {symbol: "AMD", beta: 1.2406108515690375}
3: {symbol: "FB", beta: 1.1853145746084135}
4: {symbol: "LUV", beta: 1.3727521874575148}
5: {symbol: "MSFT", beta: 1.1366312839677446}
6: {symbol: "NVDA", beta: 1.4118377903501154}
7: {symbol: "TSLA", beta: 1.9493936257640456}


change5day: Array(8) //This object is showing NaN's
0: {symbol: "AAL", day5avg: -0.013411567476948827}
1: {symbol: "AAPL", day5avg: 0.08126016260162605}
2: {symbol: "AMD", day5avg: 0.020594401282525654}
3: {symbol: "FB", day5avg: 0.04620638853545822}
4: {symbol: "LUV", day5avg: 0.034584013050571016}
5: {symbol: "MSFT", day5avg: 0.05570455952135345}
6: {symbol: "NVDA", day5avg: 0.0425905479030535}
7: {symbol: "TSLA", day5avg: 0.02307517944843207}

这是我的代码：

<Tooltip title="Average 5-day volatility Vs. SP500">
    <Typography variant="overline" component="span" color="textPrimary">
        {calculateAvgValue(object.beta) < 1 && "... " + ((calculateAvgValue(object.beta) - 1) * 100).toFixed(2) +"%"}
    </Typography>
</Tooltip>  
</Grid>
<Grid item xs={displayExtraData.view} sm={displayExtraData.view} md={12}> 
    <Typography variant="overline" component="span" color="textSecondary">                                          
        Return
    </Typography>
<Tooltip title="Average 5-day Return ">
    <Typography variant="overline" component="span" color="textPrimary">
        {calculateAvgValue(object.change5day) && "%" + 
((calculateAvgValue(object.change5day) -1) * 100).toFixed(2)}
// This code is reproducing the error in title. I cannot get the value from my function to print
    </Typography>
</Tooltip>

calculateAvgValue():


export function calculateAvgValue(series)
{
    let avg = series.reduce((a, b) => a + b.beta, 0);
    return (avg / series.length)
}

如何获取要显示的数据change5day？

标签： javascriptreactjs

解决方案

该函数按属性calculateAvgValue对数组元素求和。beta由于object.change5day数组中的元素没有beta属性，b.beta因此在 reducer 中undefined导致NaN返回（0 + undefined-> NaN，NaN + undefined-> NaN）。

更新calculateAvgValue函数以接收对数组求和的键。

export function calculateAvgValue(array, key = 'beta') {
  const sum = array.reduce((a, b) => a + b[key], 0)
  return sum / array.length
}

您现在可以调用传递数组和day5avg键的函数。

calculateAvgValue(object.change5day, 'day5avg')

推荐阅读