React Native Zomato API обзоры не отображаются - PullRequest
Новая
       34

React Native Zomato API обзоры не отображаются

0 голосов
/ 05 января 2020

Я пытаюсь отобразить обзорную информацию из Zomato API, но по какой-то причине ничего не отображается.

Я использую FlatList, чтобы выложить все это, но каждый раз, когда я компилирую код, кажется, ничего не показывает.

Вот весь мой код по теме: 

<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>}/>}

У меня есть другие данные, которые извлекаются, и все они выводятся просто отлично. По какой-то причине раздел обзора кажется странным.

Я также проверил, как отображаются отзывы в terminal, и вот что я получил: 

 "all_reviews": Object {
    "reviews": Array [
      Object {
        "review": Array [],
      },
      Object {
        "review": Array [],
      },
      Object {
        "review": Array [],
      },
      Object {
        "review": Array [],
      },
      Object {
        "review": Array [],
      },
    ],
  }

, надеюсь, кто-то с опыт работы с Zomato Api может мне помочь

1 Ответ

1 голос
/ 06 января 2020

Неправильный способ извлечения и отображения данных. Проверьте ниже образец 

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>
        );
    }
}

Измените этот код в соответствии с вашими требованиями, и если у вас есть сомнения, не стесняйтесь спрашивать.

Надеюсь, это поможет вам.

...