1

我正在尝试在反应原生页面上显示一个城市的 zomato 餐厅集合。我正在使用 zomato API。在 zomato API 文档中，我使用的是“在城市中获取 zomato 收藏”下给出的请求 URL

下面是我的代码：

import React from 'react';
import { StyleSheet, Text, View, FlatList, Image, ActivityIndicator } from 'react-native';
import { Card, CardItem } from "native-base"


export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: [],
    }
  }

  getUserFromApi = () => {
    return (
      fetch("https://developers.zomato.com/api/v2.1/collections?city_id=1", {
        headers: {
          'Content-Type': 'application/json',
          'user-key': '2bf4669cad5a8230fd2b220a2d4a37b9'
        }
      })
        .then(response => response.json())
        .then(responseJson => {
          this.setState({
            isLoading: false,
            dataSource: responseJson.collections.collection
          })
        })
        
        .catch(error => console.log(error))
    )

  }
  componentDidMount() {
    this.getUserFromApi();
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View style={styles.progress}>
          <ActivityIndicator
            size="large"
            color="#01CBC6"
          />
        </View>
      )
    }
    return (
      <View style={{marginTop: 50}}>
        <FlatList
          data={this.state.dataSource}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (

            <Card>
              <CardItem>
                <View style={styles.container}>
                </View>
                <View style={styles.userInfo}>
                  <Text> collections_id:  {item.collections_id}</Text>
                </View>
              </CardItem>
              <CardItem>
                <View style={styles.container}>
                </View>
                <View style={styles.userInfo}>
                  <Text>title: {item.title}</Text>
                </View>
              </CardItem>
              <CardItem>
                <View style={styles.container}>
                </View>
                <View style={styles.userInfo}>
                  <Text>description: {item.description}</Text>
                </View>
              </CardItem>
            </Card>
          )}
        />
      </View>
    );
  }
}

我没有收到任何错误，但我的屏幕是空白的。我的屏幕上没有输出。我无法理解我在代码中哪里出错了

4

1 回答 1

0

在此处输入图像描述

        //----------------set state like this -----------------------//
        this.setState({
          isLoading: false,
          dataSource: responseJson.collections,
        });
        //-------------------------------------☝-----------------------//
        //    Also look FlatList for how the data is rendered           //

工作应用程序：世博小吃

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  Image,
  ActivityIndicator,
} from 'react-native';
import { Card, CardItem } from 'native-base';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: [],
    };
  }

  getUserFromApi = () => {
    return fetch(
      'https://developers.zomato.com/api/v2.1/collections?city_id=1',
      {
        headers: {
          'Content-Type': 'application/json',
          'user-key': '2bf4669cad5a8230fd2b220a2d4a37b9',
        },
      }
    )
      .then((response) => response.json())
      .then((responseJson) => {
        console.log('data:', responseJson);

        //----------------set state like this------------------------//
        this.setState({
          isLoading: false,
          dataSource: responseJson.collections,
        });
        //------------------------------------------------------------//
        //Also look FlatList for how the data is rendered             //
      })

      .catch((error) => console.log(error));
  };
  componentDidMount() {
    this.getUserFromApi();
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View style={styles.progress}>
          <ActivityIndicator size="large" color="#01CBC6" />
        </View>
      );
    }
    return (
      <View style={{ marginTop: 50 }}>
        <FlatList
          data={this.state.dataSource}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
            <Card>
              <CardItem>
                <View style={styles.container}></View>
                <View style={styles.userInfo}>
                  {/**access data of for rendering like below  */}
                  <Text> collections_id: {item.collection.collection_id}</Text>
                </View>
              </CardItem>
              <CardItem>
                <View style={styles.container}></View>
                <View style={styles.userInfo}>
                  {/**access data of for rendering like below  */}
                  <Text>title: {item.collection.title}</Text>
                </View>
              </CardItem>
              <CardItem>
                <View style={styles.container}></View>
                <View style={styles.userInfo}>
                  {/**access data of for rendering like below  */}
                  <Text>description: {item.collection.description}</Text>
                </View>
              </CardItem>
            </Card>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: { padding: 10 },
  userInfo: { padding: 10 },
});
于 2020-12-31T05:16:02.720 回答