React Native flatlist从一个获取API响应

Question

我试图从一个获取API响应返回一个平面列表到一个审查主体部分，将显示给定位置的所有评论。

获取的端点是:

{
"location_id": 73,
"location_name": "Aunt Mary's Great Coffee Shop",
"location_town": "London",
"latitude": 74.567,
"longitude": 102.435,
"photo_path": "http://cdn.coffida.com/images/78346822.jpg",
"avg_overall_rating": 4.5,
"avg_price_rating": 4.3,
"avg_quality_rating": 4,
"avg_clenliness_rating": 3.8,
"location_reviews": [
{
"review_id": 643,
"overall_rating": 4,
"price_rating": 2,
"quality_rating": 3,
"clenliness_rating": 5,
"review_body": "Great coffee, but the bathrooms stank!",
"likes": 4654
}
]
}

原生代码:

/* eslint-disable semi */
/* eslint-disable prettier/prettier */
import React, {Component} from 'react';
import {View, Text, ToastAndroid, FlatList} from 'react-native';

class Location extends Component {
constructor(props) {
super(props);

this.state = {
location_id: null,
locations: [],
isLoading: true,
};
}
componentDidMount = () => {
this.props.navigation.addListener('focus', () => {
this.state.isLoading;
});
this.getData();
}

getData = async () => {
const loc_id = this.props.route.params.location_id;
return await fetch('http:10.0.2.2:3333/api/1.0.0/location/' + loc_id, {
method: 'get',
'headers': {

'Content-Type': 'application/json',
},
})
.then((response) => {
if (response.status === 200) {
return response.json();
} else if (response.status === 404) {
ToastAndroid.show('Unable to locate location', ToastAndroid.SHORT);
} else {
throw 'something went wrong';
}
})
.then((responseJson) => {
console.log(responseJson);
this.setState({
locations: responseJson,
isLoading: false,
});
})
.catch((error) => {
ToastAndroid.show(error.toString(), ToastAndroid.SHORT);
});
}

render() {

if (this.state.isLoading) {
return (
<View>
<Text>Loading...</Text>
</View>
)
} else {
return (
<View>
<View>
<Text>Location ID: {this.props.route.params.location_id}</Text>
<Text>Name: {this.state.locations.location_name}</Text>
<Text>City: {this.state.locations.location_town}</Text>
<Text>Overall rating: {this.state.locations.avg_overall_rating}</Text>
</View>

<View>
<FlatList
data={this.state.locations}
renderItem={({item}) => (
<View style={{margin: 10, padding: 10}}>
<View>
<Text>ID: {parseInt(item.location_id)}</Text>
</View>

<View>
<Text>Rating: {item.avg_overall_rating}</Text>
<Text>Town: {item.location_town}</Text>
<Text>Location Review: {item.location_reviews.review_id}</Text>
</View>

<View>
<Text>Name: {item.location_name}</Text>
<Text>Location Review: {item.location_reviews.map(items => items.review_id)}</Text>
<Text>Location Review: {item.location_reviews.map(items => items.review_body)}</Text>
</View>
</View>
)}
keyExtractor={(item) => item.location_id.toString()}
/>
</View>
</View>
);
}


}

}

export default Location;

我要做的是返回平面列表中每个位置的评论数据，因为有多个评论。我已经试过了。Location_reviews作为flatlist和其他一些变量的数据，但似乎没有一个能完成工作。它们不返回任何错误。什么都没有

Answer 1

你的代码确实可以工作，但是你把它们对齐错了。取代,

<View>
<Text>Name: {item.location_name}</Text>
<Text>Location Review: {item.location_reviews.map(items => items.review_id)}</Text>
<Text>Location Review: {item.location_reviews.map(items => items.review_body)}</Text>
</View>

用下面的代码。如果你不想让location_name在每次评论中重复，就把它们放在<View>之前。

{item.location_reviews.map(items=>{
return <View>
<Text>Name: {item.location_name}</Text>
<Text>Location Review: {items.review_id}</Text>
<Text>Location Review: {items.review_body}</Text>
</View>
})}

如果它解决了你的问题，请标记为正确答案:D!

Answer 2

在FlatList组件中，您将this.state.locations传递为data，而您应该传递this.state.location_reviews(基于提供的示例响应)