React 네이티브, 경고 : 실패 propType : 잘못된 서브 콘텐츠가 예상 됨 단일 ReactElement

Question

접을 수있는 listviews에 react-native-accordion을 사용하고 있습니다. 내 코드가 아래로 내려갔습니다. 그 작동하지만 두 가지 경고가 나타납니다 :

경고 : propType에 실패했습니다 : Accordion에 잘못된 소유물이 공급되어 단일 ReactElement가 필요합니다. StaticRenderer의 렌더링 메소드를 확인하십시오.

경고 : 배열이나 반복기의 각 하위에는 고유 한 "키"소품이 있어야합니다. 아코디언의 렌더링 방법을 확인하십시오. StaticRenderer에서 자식을 전달했습니다.

어떻게 고칠 수 있습니까? 또는 각 헤더에 대해 여러 개의 내용을 갖는 더 좋은 방법이 있습니까? (어린이와 접을 수있는 목록보기)

class Courses extends Component { 

    constructor(props) { 
     super(props); 
     this.state = { 
      dataSource: new ListView.DataSource({ 
      rowHasChanged: (row1, row2) => row1 !== row2, 
      }), 
      loaded: false, 
     }; 
     this.rowPressed = this.rowPressed.bind(this); 
    } 
    rowPressed(data) { 
    console.log('row press'); 
    } 

    fetchData() { 
/// fetching data ..... 
    } 

    componentDidMount() { 
    this.fetchData(); 
    } 

    render() { 
    if (!this.state.loaded) { 
     return this.renderLoadingView(); 
    } 

    return (
     <View style={{ flex: 1 }}> 
     <ListView 
     dataSource={this.state.dataSource} 
     renderRow={this.renderRow} 
     style={styles.listView} 
     /> 
     </View> 
    ); 
    } 

    renderRow(data) { 
    var header = (
     <View> 
      <View style={styles.rowContainer}> 
      <View style={styles.textContainer}> 
       <Text style={styles.title}>{data.nid}</Text> 
       <Text style={styles.description} numberOfLines={0}>{data.title}</Text> 
      </View> 
      </View> 
      <View style={styles.separator}/> 
     </View> 
    ); 
/////////// 
    var content = []; 
    for(var x=0; x < Object.keys(data.course).length; x++){ 
     content.push(
     <View style={styles.rowContainer}> 
     <TouchableHighlight onPress={() => this.rowPressed(data.course[x].course_id).bind(this)} underlayColor='#e3e0d7'> 
     <Text style={styles.child}>{data.course[x].title}</Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
//////////// 
    return (
     <Accordion 
     header={header} 
     content={content} 
     easing="easeOutCubic" 
     /> 
    ); 
    } 

    renderLoadingView() { 
    return (
     <View style={styles.loading}> 
     <Text style={styles.loading}> 
      Fetching Courses, please wait... 
     </Text> 
     </View> 
    ); 
    } 
} 

module.exports = Courses; 

감사합니다.

---

업데이트 : 이제 첫 번째 오류는 사라졌지 만 배열의 모든 행을 한 줄로 표시합니다. 나는 '{\ n'}을 (를) 추가하려고 시도했지만 작동하지 않았습니다. 어떤 생각을 어떻게 고쳐야합니까? 또는 스타일 시트를 사용해야합니까?

---

업데이트 2

var content = []; 
 
    for(var x=0; x < Object.keys(data.course).length; x++){ 
 
     content.push(
 

 
     <TouchableHighlight underlayColor='#e3e0d7'> 
 
     <Text style={styles.child}>{data.course[x].title}</Text> 
 
     </TouchableHighlight> 
 

 
    ); 
 
    } 
 
    var clist = (
 
     <View style={styles.rowContainer}> 
 
     {content} 
 
     </View> 
 
    ); 
 
//////////// 
 
    return (
 
     <Accordion 
 
     header={header} 
 
     content={clist} 
 
     easing="easeOutCubic" 
 
     /> 
 
    );

: touchablehighlight에 키를 추가

는 두 번째 문제를 해결했다. 감사합니다

Answer 1

그래서 나는 listview를위한 페이스 북의 예제를 보았고, 이것들을 예제로 가지고 있습니다. 두 번째 경고를 제거하려면 key 속성을 제공하십시오. 이 예는 _renderSeperator 기능 여기

<UIExplorerPage 
    title={this.props.navigator ? null : '<ListView>'} 
    noSpacer={true} 
    noScroll={true}> 
    <ListView 
     dataSource={this.state.dataSource} 
     renderRow={this._renderRow} 
     renderScrollComponent={props => <RecyclerViewBackedScrollView {...props} />} 
     renderSeparator={this._renderSeperator} 
    /> 
    </UIExplorerPage> 

에서 그것을 공급하는 것은 renderSeperator이며, 그것은 무엇

_renderSeperator: function(sectionID: number, rowID: number, adjacentRowHighlighted: bool) { 
    return (
     <View 
     key={`${sectionID}-${rowID}`} 
     style={{ 
      height: adjacentRowHighlighted ? 4 : 1, 
      backgroundColor: adjacentRowHighlighted ? '#3B5998' : '#CCCCCC', 
     }} 
     /> 
    ); 
    } 
}); 

당신이 여기에 전체 예를 https://facebook.github.io/react-native/docs/listview.html

및 기타 유래 제안 볼 수 있습니다처럼 보이는 여기에 Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`

첫 번째 경고에 대해서는 Accordian이 content 속성에 문제가있는 것처럼 보입니다. 하나의 요소 만 가져야하는 경우 요소의 배열을 제공하고 있습니다. 대신

`<Content /> 
<Content /> 
<Content /> 
<Content /> 
<Content /> 
//etc... one for every row in the array` 

내가 있기 때문에 이것을 테스트 할 수 없습니다

<Accordion 
    header={header} 
    content={content} 
    easing="easeOutCubic" 
    /> 

은 다음과 같습니다의 내부에 Conent처럼 보이기 때문에 하나의

<View> //<Content /> </View>

의 배열을 포장하십시오 내 맥이 없으니 확인해 줘.