无法使用平面列表列出数据

Question

我正在尝试列出我使用 FlatList 从 api 获取的数组，但它没有显示任何 contents.i 交叉检查它在我打印时包含元素的数组。

所以在 flatlist 组件中我怀疑问题出在 renderItem prop.

state = {bookData:[]}

  componentWillMount ()
  {
axios.get('https://udhishtabharata.com/appsupport/alanwattsapp/services/ list/book///id')
       .then(response => this.setState({bookData: response.data}))
   }
 renderdata(){
   {console.log(this.state.bookData)}
 }

 render(){
     return (
      <View style={styles.viewStyles}>
      <View style={styles.statusBarStyle} />
      <Header headerText='Books' />
      {this.renderdata()}
      <List>
        <FlatList>
            data={this.state.bookData}

            renderItem={({item})=> (
              <ListItem 
                roundAvatar
                title={item.title}

              />
            )}
        </FlatList>
      </List>

  </View>
);
}
}

我的回复是：

[
  {
    "id":"32",
    "title":"Become What You Are",
    "subtitle":"",
    "photo":"/files/pictures/book/32-5.jpg",
    "url":"https://www.amazon.com/Become-What-You-Alan-Watts/dp/1570629404",
    "metakeywords":"Alan Watts Book: Become What You Are",
    "metadescr":"The book Become what you are published in 1957 presents Alan Watts’ meditations and reflections on the dilemma of capturing the true self. ",
    "metatitle":"Alan Watts Book: Become What You Are",
    "doa":"2018-11-20 12:13:31",
    "dou":"2018-11-20 12:31:39",
    "descr":"<div>The book 'Become what you are' published in 1957 presents Alan Watts’ meditations and reflections on the dilemma of capturing the true self. Become what you are exposes the playfulness and intelligence of thought and simplicity of language that has made him famous as an exponent of Eastern thoughts for Westerners. <br></div><div><br></div><div>\r\nIn the book, he discusses various philosophical ideas and offers practical wisdom of the life of human beings. He rejects the thought of ego which is to be avoided but is unavoidable in every aspect of life. Changing the nature of life is the root of this work. It gives a lively effect on your mind and examines how the reality works in several aspects and variants of life situations. It gives the basic knowledge on Zen and Tao from which the detailed idea of wisdom is understood. The whole concept revolves around seeing life as it is which is the taoist notion of joyful living.</div>",
    "views":"0",
    "outboundlinkclick":"0",
    "urlname":"become_what_you_are",
    "status":"A",
    "customer_name":"",
    "customer_photo":""
  },
  {
    "id":"35",
    "title":"The Way of Zen",
    "subtitle":"",
    "photo":"/files/pictures/book/35-2.jpg",
    "url":"https://www.amazon.com/Way-Zen-Alan-W-Watts/dp/0375705104",
    "metakeywords":"",
    "metadescr":"",
    "metatitle":"",
    "doa":"2018-11-20 12:39:57",
    "dou":"2018-11-20 12:50:00",
    "descr":"<div>The Way of Zen is a clear-cut presentation of Zen Buddhism which is published in 1957. Alan Watts examines and explains the concepts, notions and principles of ancient religion to the Western world. The book gives a complete clarification of Zen Buddhism which has a massive difference from the Southern Indian Buddhism.</div><div>The Way of Zen is completely a non-fiction book, which is divided in to two sections. The first part deals with historical development of Zen Buddhism and second part gives a clear idea on the principles of the same. Alan traces the birth of Zen Buddhism in relation to Chinese Taoism and Mahayana Buddhism. The work also introduces a variety of philosophical concepts such as The Middle Way, anatman and wuwei. Watts, through The Way of Zen gives a clarity of thought on the ways of liberation followed by Zen Buddhism and how it is easily adapted in our lives to lead a quality life.</div>",
    "views":"0",
    "outboundlinkclick":"0",
    "urlname":"the_way_of_zen",
    "status":"A",
    "customer_name":"",
    "customer_photo":""
  }
]

我需要列表显示在屏幕上。任何帮助表示赞赏

Answer 1

试试这个！

 state = {bookData:[]}

  componentWillMount ()
  {
      axios.get('https://udhishtabharata.com/appsupport/alanwattsapp/services/ list/book///id')
       .then(response => this.setState({bookData: response.data}))
  }

 renderdata(){
   {console.log(this.state.bookData)}
 }

renderItems = ({ item, index }) => {
    return (
        <View key={index}>
                <TouchableOpacity>
                    <Image source={} />
                </TouchableOpacity> 
        </View>
    )
};

_keyExtractor = (item, index) => item.id;

 render(){
     return (
      <View style={styles.viewStyles}>
      <View style={styles.statusBarStyle} />
      <Header headerText='Books' />
        <FlatList
            data={this.state.bookData}
            keyExtractor={this._keyExtractor}
            renderItem={this.renderItems}
              />

  </View>
);
}

请在 renderItem 函数中设置样式在 renderItem 函数中，您将一个一个地获取对象，因此根据您的设计进行样式更改并显示数据

Answer 2

尝试在您的代码中排序我发现了一些错误或错误的用法

state = {
    bookData:[]
}

componentDidMount(){
    axios.get('https://udhishtabharata.com/appsupport/alanwattsapp/services/ list/book///id')
    .then(response => this.setState({bookData: response.data}))
}

render(){
    return (
        <View style={styles.viewStyles}>
            <View style={styles.statusBarStyle} />
            <FlatList
                data={this.state.bookData}
                renderItem={({item})=> 
                    <ListItem 
                    roundAvatar
                    title={item.title}
                    />
                }
                extraData={this.state.bookData}
                keyExtractor={(item) => item.id}
                ListHeaderComponent={<Header headerText='Books' />}
            />
        </View>
    );
}

首选 componentDidMount() 而不是 componentWillMount() 作为获取数据和设置状态的地方
您可以轻松使用 FlatList
注意你声明的方式 Flatlist（你错误地放置了关闭标签 >）
传递 FlatList 一个 ListHeaderComponent 道具，如果你想让它随你的列表滚动

无法使用平面列表列出数据

unable to list data using flatlist

react-native

axios

expo

react-native-flatlist

react-native-elements