错误："Received NaN for the `children` attribute. If this is expected, cast the value to a string."

Question

尝试显示数组字典数组中的数据时，标题中出现错误。 这只发生在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获取要显示的数据？

Answer 1

calculateAvgValue函数按beta属性对数组元素求和。由于object.change5day数组中的元素没有beta属性，因此化简器中的b.betaundefined导致返回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')