Question

我试图列出我使用FlatList从api获取的数组，但不显示任何内容。我在打印该数组时对其进行了交叉检查。

所以在平面列表组件中，我怀疑问题出在renderItem属性上。

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道具，以使其随列表一起滚动

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

2 个答案: