Question

我正在尝试从名为import re def regexfinder(string_var): res='' x=re.search(r"(?<=About).*?(?=[shoulder,waist,hem,bust,neck,bust,top,hips])", string_var).group(0) tohave=int(x[1:3]) if tohave >=16 and tohave<=36: res="Mini" return res if tohave>36 and tohave<40: res="Above the Knee" return res if tohave >=40 and tohave<=46: res="Knee length" return res if tohave>46 and tohave<49: res="Mid/Tea length" return res if tohave >=49 and tohave<=59: res="Long/Maxi length" return res if tohave>59: res="Floor Length" return res的json文件创建SectionList。基本上notes.json json数组中的一个对象将对应于一个notes条目。我已经在SectionList中加载了json数组。但是，当我尝试使用notesData作为notesData的来源时，我会收到错误：SectionList

这是我的代码：

TypeError: undefined is not an object (evaluating 'props.sections.reduce')

这是我的Notes.json

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

Answer 1

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

部分

标识要为给定部分呈现的数据的对象。

属性：

data数组

此部分中呈现项目的数据。数组   对象，就像FlatList的数据道具一样。

示例

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

从本地json文件显示SectionList

2 个答案: