Получить данные в React Native из mlab

Я пытаюсь научиться получать данные с сервера с помощью apikey. Я создал какой-то документ с этим ссылка. С моим документом ссылка я не могу перечислить элементы в моем коде.

import React from 'react'; import { FlatList, ActivityIndicator, Text, View } from 'react-native';

export default class FetchExample extends React.Component { constructor(props){ super(props); this.state = { isLoading: true} } componentDidMount(){ return fetch('https://api.mlab.com/api/1/databases/ibrhmklnc/collections/kitap?apiKey=xRw1H6NNZZnyeZArU5L8oUoVcsFb6tpf') .then((response) => response.json()) .then((responseJson) => { this.setState({ isLoading: false, dataSource: responseJson.movies, }, function(){ }); }) .catch((error) =>{ console.error(error); }); } render(){ if (this.state.isLoading){ return( <View style = {{flex: 1, padding: 20}}> <ActivityIndicator/> </View> ) } return( <View style = {{flex: 1, paddingTop:20}}> <FlatList data = {this.state.dataSource} renderItem = {({item}) => <Text>{item.title}, {item.releaseYear}</Text>} keyExtractor = {({id}, index) => id} /> </View> ); } }

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
298
1

Ответы 1

Вот полный ответ API

[
    { 
        _id: { '$oid': '5be7260efb6fc072d46759b5' },
        movies: [ 
            { id: '1', title: 'Star Wars', releaseYear: '1977' },
            { id: '2', title: 'Back to the Future', releaseYear: '1985' },
            { id: '3', title: 'The Matrix', releaseYear: '1999' },
            { id: '4', title: 'Inception', releaseYear: '2010' },
            { id: '5', title: 'Interstellar', releaseYear: '2014' } 
        ] 
    }
]

Как видите, ответ API - это массив. Итак, чтобы взять список фильмов, вы должны установить свой dataSource следующим образом:

dataSource: responseJson[0].movies,

Другие вопросы по теме