如何将数据传递给SectionList？

Question

我真的很困惑,因为我不明白如何将数组传递给SectionList.当我尝试这一切时一切都很好

 <SectionList
                        renderItem={({item}) => <View><Text> title={item.title}</Text></View>}
                        renderSectionHeader={({section}) => <View><Text> title={section.key}</Text></View>}
                        sections={[
                                {data: [{title:123},{title:"aaa"}], key: "aaa"},
                                data: [{title:333},{title:"bbbb"}], key: "bbb"},
                                {data: [{title:123},{title:"aaa"}], key: "ccc"},
                            ]}
                    />

但是,如果我尝试使用一个函数(据我所知,它完全相同),我得到一个错误"props.sections.reduce不是一个函数".如何将带有函数的数组传递给SectionList？谢谢

 sections={()=>[
                                    {data: [{title:123},{title:"aaa"}], key: "aaa"},
                                data: [{title:333},{title:"bbbb"}], key: "bbb"},
                                {data: [{title:123},{title:"aaa"}], key: "ccc"},
                                ]}
                        />

Answer 1

段道具需要一个数组而不是一个函数.要在props中使用函数,此函数必须返回一个数组.该数组应包含一个字符串键和一个数据对象.您可以在此对象中使用许多参数,有关必须信息,请参阅此页面

例:

export default class Example extends React.Component {

  selectionList = () => {
    return([
      {data: [{title:123},{title:"aaa"}], key: "aaa"},
      {data: [{title:333},{title:"bbbb"}], key: "bbb"},
      {data: [{title:123},{title:"aaa"}], key: "ccc"},
    ])
  }

  render () {
    return (
      <View>
        <SectionList
          renderItem={({item}) => <View><Text> title={item.title}</Text></View>}
          renderSectionHeader={({section}) => <View><Text> title={section.key}</Text></View>}
          sections={this.selectionList()}
        />
      </View>
    )
  }
}