部分列表未显示

时间:2019-04-26 19:31:30

标签: react-native

遵循React-Native教程之后,我无法显示数据。

当我执行console.log时,我的数据如下所示:

Array [
  Object {
    "data": Object {
      "address": "8753 2nd Street",
      "id": "5507",
      "inspection_date": "2019-03-27",
      "inspection_time": "07:00:00",
      "inspection_time_display": "07.00 AM",
      "inspector": "Frank",
    },
    "key": "5507",
    "title": "8753 2nd Street",
  },
  Object {
    "data": Object {
      "address": "11445 Paramount ave ",
      "id": "5505",
      "inspection_date": "2019-03-23",
      "inspection_time": "10:30:00",
      "inspection_time_display": "10.30 AM",
      "inspector": "Fabian Hernandez",
    },
    "key": "5505",
    "title": "11445 Paramount ave ",
  },
]

我有大多数教程中指出的“数据”和“标题”部分。

我的组件是这样的:

 <Container>
    <Header />
    <Content>
    <SectionList
      renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}
      renderSectionHeader={({section: {title}}) => (
        <Text style={{fontWeight: 'bold'}}>{title}</Text>
      )}
      sections={this.state.dataSource}
      keyExtractor={(item, index) => item + index}
    />
    </Content>
  </Container>

这是我认为正在发生的事情,但是我显然错了,因为没有加总。 遍历“部分”

renderItem={({item, index, section}) => <Text key={index}>{item}</Text>}

我期望上面得到“数据”。

获得标题:

renderSectionHeader={({section: {title}}) => (
            <Text style={{fontWeight: 'bold'}}>{title}</Text>
          )}

我希望上面得到“标题”。我想念什么或做错什么了?

1 个答案:

答案 0 :(得分:1)

我相信您每个节对象中的数据键都必须是自身的数组。示例:

const mySectionedData = [
  {
    title: 'section 1',
    data: [ 
      {address: '123 street', name: 'me'}, 
      {address: '456 street', name: 'you}
    ]
  },
  {
    title: 'section 2',
    data: [ 
      {address: '789 street', name: 'us'} 
    ]
  }
]

然后,您可以从每个节中访问{title, data},这允许节列表从标题中呈现节标题,并从数据数组中呈现项目列表。

希望有帮助!