从获取 API 响应中反应本机平面列表

Question

我正在尝试 return 从 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
        }
      ]
    }

React Native 代码：

    /* 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;

我想做的是 return 平面列表中每个位置的评论数据，因为有多个评论。我尝试使用 locations.location_reviews 作为 flatlist 和其他一些变体的数据，但 none 似乎可以完成工作。他们不会 return 任何错误。什么都没有

Answer 1

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

Answer 2

您的代码确实有效，但您没有对齐它们。替换，

<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!

从获取 API 响应中反应本机平面列表

React Native flatlist from a fetch API response

react-native

fetch-api

react-native-flatlist