React Native，警告：失败proType：无效prop内容提供预期的单个ReactElement

Question

我正在使用反应本地手风琴的可折叠列表视图。我的代码是下风箱。它的工作，但它给两个警告：

警告：失败的propType:提供给Accordion的prop内容无效，应为单个元素。检查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'}，但没有效果。知道怎么解决吗？还是应该使用样式表？

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

更新2：

添加一个键到触摸突出显示并修复了第二个问题。谢谢

Answer 1

所以我在facebook上看了一个listview的例子，他们就以这个为例。要消除第二个警告，请尝试提供键属性。此示例在\u renderoperator函数中提供它

 <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

和其他stackoverflow建议在这里警告：数组或迭代器中的每个孩子都应该有一个唯一的“键”道具。检查ListView的渲染方法

至于第一个警告，看起来你的手风琴的内容属性有问题。当它应该只有一个元素时，你给它一个元素数组。尝试将数组包装在一个单一的

因为看起来你的Conent在

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

看起来是这样的

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

我无法测试，因为我没有mac电脑，请确认。