react-native - 如何将数据传递到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

截面 Prop 需要一个数组而不是一个函数。要在props部分中使用函数，此函数必须返回一个数组。该数组应包含一个字符串键和一个数据对象。您可以在此对象中使用许多参数，有关必不可少的信息，请查阅this page。

例子:

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