Question

从本地 json 文件显示 SectionList

2018-03-12

2681

reactjs react-native

我正尝试从名为 notes.json 的 json 文件创建 SectionList 。基本上， notes json 数组中的一个对象将对应一个 SectionList 条目。我已在 notesData 中加载了 json 数组。但是，当我尝试使用 notesData 作为 SectionList 的源时，我收到错误： TypeError：undefined 不是对象（评估“props.sections.reduce”）

这是我的代码：

import React from 'react';
import { Text, View, SectionList, ListItem, H1 } from 'react-native';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { styles } from '~/containers/Notes/styles';

import { notes } from './Notes.json';

const notesData = [];
Object.keys(notes).forEach((key) => {
    notesData.push(notes[key]);
});

class NotesContainer extends React.Component {

    render() {
        return (
            <View style={styles.container}>
                <SectionList
                    renderItem={({ item }) => <ListItem title={item.RELEASE_NOTE} />}
                    renderSectionHeader={({ section }) => <Text title={section.RELEASE_VERSION} />}
                    sections={this.notesData}
                />
            </View>
        );
    }
}

export { NotesContainer };
export default connect(null, null)(NotesContainer);

这是我的 Notes.json

{
  "notes": [
    {
      "RELEASE_VERSION": "0.1.1",
      "RELEASE_DATE": "01 Mar 2018",
      "RELEASE_NOTE": [
        "General bug fixes"
      ]
    },
    {
      "RELEASE_VERSION": "0.1.0",
      "RELEASE_DATE": "01 Feb 2018",
      "RELEASE_NOTE": [
        "Initial Launch"
      ]
    }
  ]
}

Answer 1

您的 SectionList 数据结构不正确，它应该有一个 data prop ，其中包含您想要在该部分中呈现的数据数组。下面是您所拥有的数据的示例。

section

An object that identifies the data to be rendered for a given section.

Properties:

data array

The data for rendering items in this section. Array of objects, much like FlatList's data prop.

示例

export default class App extends Component {
  constructor() {
    super();
    this.notesData = Object.keys(notes).map((key) => {
      return { data: notes[key].RELEASE_NOTE, version: notes[key].RELEASE_VERSION }
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <SectionList
            renderItem={({ item }) => <Text>{item}</Text>}
            renderSectionHeader={({ section }) => <Text>{section.version}</Text>}
            sections={this.notesData}
        />
      </View>
    );
  }
}

Answer 2

您可以使用 ListView 组件根据 json 数据制作列表；

constructor(props) {
   super(props);
   this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
   this.listNotes = this.listNotes.bind(this);

   this.state = {
      notesData: this.ds.cloneWithRows({}),
   };
}

componentWillMount() {
   this.setState({ notesData: this.ds.cloneWithRows([notes]) });
} 

renderState() {
  return (
    <View>
      <ListView
        dataSource={this.state.notesData}
        enableEmptySections
        renderRow={this.listNotes}
      />
    </View>
  );
}

listNotes(rowData) {
   return (
      <View>
         {rowData.map((item, key) => (
             <View key={key}>
               ...
             </View>
        ))}
      </View>
    );
 }

 render() {
    <ScrollView>
      {this.renderState()}
    </ScrollView>
 }