在 React Native 中访问和理解 SectionList

Question

我是 React Native 的新手，我来自 iOS 背景。有人可以告诉我关于 iOS 的 Sectionlist 吗？我已经阅读了一些官方和博客教程，但无法理解。我有一个示例 json ：

[{"key":"New","data":[{"name":"Foo1"},{"name":"Foo2"}]},{"key":"Old","data":[{"name":"Foo3"},{"name":"Foo4"}]}]

通过对“ /sf/answers/3262098171/ ”的一些了解，我试图访问项目名称，我得到了结果，名称正在显示。但是当我把儿子改成：

[{"key":"New","gender":"male","name":{"title":"mr","first":"janique","last":"costa"},"registered":"2014-09-22 22:38:28","phone":"(48) 4518-1459","cell":"(22) 3632-3660"},{"key":"New11111","gender":"male11111","name":{"title":"mr11111","first":"janique11111","last":"costa11111"},"registered":"2014-09-22 22:38:2811111","phone":"(48) 4518-145911111","cell":"(22) 3632-366011111"}]

并尝试访问性别，我收到错误：“类型错误：未定义不是对象（正在评估'section.data.length'）”

_renderItem = ({ item, section }) => (<Text>{section.key}</Text>)

    _renderSectionHeader = ({ section }) => {
      return (
        <View style={styles.sectionHeader}>
          <Text style={styles.header}>{section.key}</Text>
        </View>
      )
    }

render() {
    return (


      <View style={styles.container}>
        <SectionList
            sections={data}
            renderItem={this._renderItem}
            renderSectionHeader={this._renderSectionHeader}
        />
      </View>


    );
  }

Answer 1

根据SectionList，传递给sectionsproperty 的对象data必须是一个对象数组，该对象的property 也必须是一个数组。您所做的更改不包含data部分，因此有效的 JSON 可能是

[
  {
    key: "New1", 
    data: [{"gender":"male","name":{"title":"mr","first":"janique","last":"costa"},"registered":"2014-09-22 22:38:28","phone":"(48) 4518-1459","cell":"(22) 3632-3660"}]
  },
  {
    key: "New2", 
    data: [{"gender":"male11111","name":{"title":"mr11111","first":"janique11111","last":"costa11111"},"registered":"2014-09-22 22:38:2811111","phone":"(48) 4518-145911111","cell":"(22) 3632-366011111"}]
  },
  // When data is empty, send empty array as shown below not null or empty object
  {
    key: 'New3',
    data: []
  }
];

希望这可以帮助。