Reactive Native, Warnung: Fehlgeschlagen propType: Ungültiger Prop-Inhalt wird erwartet ein einzelnes ReactElement erwartet

Question

Ich benutze react-native-accordion für reduzierbare Listenansichten. Mein Code ist unten aufgeführt. es funktioniert, aber es gibt zwei Warnungen:

Warnung: Fehlgeschlagen propType: Ungültige Prop Inhalt an Akkordeon geliefert, erwartete ein einzelnes ReactElement. Überprüfen Sie die Rendermethode von StaticRenderer.

Warnung: Jedes untergeordnete Element in einem Array oder Iterator sollte eine eindeutige "Schlüssel" -Stütze haben. Überprüfen Sie die Rendermethode von Akkordeon. Es wurde ein Kind von StaticRenderer übergeben.

Irgendeine Idee, wie man es repariert? oder eine bessere Möglichkeit, mehrere Inhalte für jeden Header zu haben? (Zusammenklappbare Listenansichten mit Kindern)

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; 

Vielen Dank im Voraus!

Update: jetzt ersten Fehler ist weg, aber es zeigt alle Zeilen in Array in einer Zeile. Ich habe versucht, {'\ n} hinzuzufügen, aber es hat nicht funktioniert. eine Idee, wie das zu beheben? oder sollte ich Stylesheets verwenden?

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" 
 
     /> 
 
    );

---

Update 2:

einen Schlüssel zu touchablehighlight Hinzufügen tat das zweite Problem beheben. Danke

Answer 1

Also schaute ich mir ein Beispiel auf Facebook für eine Listview an und sie haben dies als Beispiel. Um die zweite Warnung loszuwerden, versuchen Sie, eine key Eigenschaft zu liefern. Dieses Beispiel ist es in der _renderSeperator Funktion liefert

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

hier ist die renderSeperator und wie es aussieht

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

Sie im vollständigen Beispiel aussehen kann hier https://facebook.github.io/react-native/docs/listview.html

und andere Stackoverflow Vorschläge hier Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `ListView`

Wie für die erste Warnung sieht es aus wie Ihre Accordian ein Problem mit seiner Inhaltseigenschaft hat. Sie geben ihm ein Array von Elementen, wenn es nur ein Element haben sollte. Versuchen Sie, die Anordnung in einem einzigen

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

Einwickeln, weil es wie Ihre Inhalteanbieter sieht innerhalb von

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

wie folgt aussieht statt

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

ich das nicht testen können, weil Ich habe meinen Mac nicht, also bestätige es bitte.