0

我正在尝试列出我使用 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":""
  }
]

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

4

2 回答 2

0

试试这个！ 

 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 函数中，您将得到一个一个对象，因此根据您的设计进行样式更改并显示数据

于 2019-01-23T10:05:45.370 回答
0

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

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
于 2019-01-23T10:13:25.167 回答