renderRow() 내 JSX에 대한 배열 .map() 배열

Question

문자열 배열을 가져 와서 JSX에서 map() 함수를 사용하여 JSX로 '변환'하는 데 문제가있어서 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를 반환하면 정상적으로 작동하지만 내 배열의 모든 요소에 대해이 작업을 수행 할 수 있어야합니다.

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> 
) 
}