[英]React Native Zomato API reviews not being displayed
I am trying to display review information from the Zomato API
however for some reason nothing is being displayed.我正在尝试显示来自 Zomato API
评论信息,但由于某种原因没有显示任何内容。
I am using a FlatList
to put it all out there, but every time I compile the code nothing seems to show up.我正在使用FlatList
将其全部放在那里,但每次编译代码时似乎都没有显示任何内容。
Here is all my code regarding the subject:这是我关于该主题的所有代码:
<Text>REVIEWS:</Text>
{this.state.data.all_reviews_count == 0 ?
<View style={{ flex: 1, padding: 20, marginTop:0}}>
<Text style={{ color: '#000', fontWeight: 'bold' }}>No reviews for this restaurant yet</Text>
</View> :
<FlatList
keyExtractor={item => item.id}
showsVerticalScrollIndicator={false}
data={this.state.data}
renderItem={({ item }) =>
<View>
<Text>{item.all_reviews_count}</Text>
</View>}/>}
I have other data being retrieved and it's all being outputted just fine.我正在检索其他数据,并且所有数据都可以正常输出。 for some reason the review section seems to be weird.出于某种原因,评论部分似乎很奇怪。
I also checked to see how reviews are displayed in the terminal
and this is what I got:我还检查了terminal
如何显示评论,这就是我得到的:
"all_reviews": Object {
"reviews": Array [
Object {
"review": Array [],
},
Object {
"review": Array [],
},
Object {
"review": Array [],
},
Object {
"review": Array [],
},
Object {
"review": Array [],
},
],
}
hopefully somebody with experience with the Zomato Api can help me out希望有 Zomato Api 经验的人可以帮助我
The way you retrieve & display data is wrong.您检索和显示数据的方式是错误的。 Check below sample检查以下示例
import React, { Component } from 'react';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';
import axios from 'axios';
export default class Example extends Component {
constructor(props) {
super(props);
this.state = {
isLoading: true,
all_reviews: {}
}
}
async componentDidMount() {
try {
let result = await axios.request({
method: 'GET',
url: "https://developers.zomato.com/api/v2.1/reviews?res_id=16774318",
headers: {
'Content-Type': 'application/json',
'user-key': "af26b7a0e16fb73e6a30ad33cb9c6634",
},
})
this.setState({
isLoading: false,
all_reviews: result.data
})
} catch (err) {
err => console.log(err)
}
}
render() {
return (
<View>
{
this.state.isLoading ?
<View style={{ flex: 1, padding: 20 }}>
<ActivityIndicator />
</View> :
<View>
<Text>REVIEWS:</Text>
{
this.state.all_reviews.user_reviews.length == 0 ?
<View style={{ flex: 1, padding: 20, marginTop: 0 }}>
<Text style={{ color: '#000', fontWeight: 'bold' }}>No reviews for this restaurant yet</Text>
</View> :
<FlatList
keyExtractor={item => item.id}
showsVerticalScrollIndicator={false}
data={this.state.all_reviews.user_reviews}
renderItem={({ item }) =>
<View>
<Text>{item.review.rating}</Text>
</View>}
/>
}
</View>
}
</View>
);
}
}
Change this code according to your requirements & if you have doubts feel free to ask.根据您的要求更改此代码,如果您有任何疑问,请随时提问。
Hope this helps you.希望这对你有帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.