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"},
                            ]}
                    />

但是如果我尝试使用一个函数（据我所知，它完全相同），我得到一个错误＆＃34; props.sections.reduce不是一个函数＆＃34;。如何将带有函数的数组传递给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中使用函数，此函数必须返回一个数组。该数组应包含一个字符串键和一个数据对象。您可以在此对象中使用许多参数，有关必须信息，请参阅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>
    )
  }
}

Answer 2

哪里出问题了，是您首先尝试将函数传递给props而不是值。要从一个函数获得价值回报，您需要执行该函数。例子：

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

如何将数据传递给SectionList？

2 个答案: