が反応：ここでは条件付きコンポーネントのレンダリングと配列

Question

を画面に印刷がどのように見える必要がありますので、私は、H1として配列内の各アイテムを返すようにしようとしている：私はこのエラーを取得するしかし

1 
2 
3 
4 
5 

：

警告：グラフ（...）：有効なReact要素（またはnull）を返す必要があります。未定義、配列またはその他の無効なオブジェクトが返された可能性があります。

どうすればこの問題を解決できますか？

import React from 'react'; 

function NoCharts(props) { 
    return <h1>No charts</h1>; 
} 

function Charts(props) { 
    const myCharts = props.myCharts; 
    if (myCharts.length > 0) { 

    myCharts.forEach(function(chart) { 
     return <h1>{chart}</h1>; 
    }); 

    } 
    return <NoCharts />; 
} 


export default class App extends React.Component { 

    render() { 

     let arr = [1,2,3,4,5]; 

    return (
     <div> 

     <Charts myCharts={arr} /> 

     </div> 
    ) 
    } 
} 

Answer 1

エラーが言うようにあなたは "リターン" の有効な、要素を反応しなければならない -

Charts(...): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

if (myCharts.length > 0) { 

    const charts = myCharts.map(function(chart) { 
     return <h1>{chart}</h1>; 
    }); 
    return <div>{charts}</div> 

    } 
    else { 
    return <NoCharts />; 
    } 
} 

をここcodepenに取り組んアプリです。

Answer 2

myChartsを返す必要があります。現在、配列が空のときに何かを返すだけです。

return myCharts.forEach(function(chart) { 
     return <h1>{chart}</h1>; 
    });