renderRow（）内のJSXへの配列.map（）

Question

JSXがmap（）関数を使用してJSXに1つの行または行を作成できるように、配列の配列を取得してJSXに変換するのに問題があります。リストビュー。

renderRow: function(rowData) { //rowData is an Array 
    return rowData.map((data) => { 
     // now data is a single element of my array 
     return <View><Text> <Emoji size={40} name={data} /></Text></View> 
     // also tried () around the above for the return 
    }); 
    }, 
    render: function() { 
    return (
     <ListView contentContainerStyle={styles.list} 
      enableEmptySections={true} 
      initialListSize={500} 
      pageSize={20} 
      dataSource={this.state.dataSource} 
      renderRow={(rowData) => this.renderRow(rowData)} 
     /> 
    ) 
    } 

次のように私はこれを取得するエラーは、次のとおりです。

StaticRenderer.renderは（）：有効な要素（またはnull）と反応 を返さなければなりません。定義されていない配列、または他の何らかの オブジェクトが返されている可能性があります。

したがって、マップ内で何が起こっているのか、また何らかの理由でJSRがrenderRow（）関数内で正しく構築されていないことがわかります。マップを使わないで基本的なJSXを返すのはOKですが、配列のすべての要素に対して行うことができる必要があります。

map（）はこれを行う最善の方法ですか？どんな助けでも大歓迎です。

Answer 1

Reactは要素のリストを扱う方法を知らない。すべてのコンポーネントrenderメソッド、およびrenderRowのようなコールバックは、通常、単一の要素を返す必要があります。

あなたはView、または他の容器要素にアイテムをラップする必要があります。

renderRow: function(rowData) { //rowData is an Array 
    return (
    <View> 
     {rowData.map((data) => { 
     return <View><Text> <Emoji size={40} name={data} /></Text></View> 
     })} 
    </View> 
) 
}