получить данные в реагировать родной из mlab - PullRequest
Новая
       12

получить данные в реагировать родной из mlab

0 голосов
/ 04 ноября 2018

Я хочу научиться получать данные с сервера с помощью apikey. Я создаю тот же документ с этим https://facebook.github.io/react-native/movies.json. Ссылка на мой документ https://api.mlab.com/api/1/databases/ibrhmklnc/collections/kitap?apiKey=xRw1H6NNZZnyeZArU5L8oUoVcsFb6tpf Но я не могу перечислить элементы в своем коде. 

</p>

<ol>
<li><p>import React from 'react'; import { FlatList, ActivityIndicator,
Text, View  } from 'react-native';</p>

<p>export default class FetchExample extends React.Component {<br>
constructor(props){
    super(props);
    this.state ={ isLoading: true}   }</p>

<p>componentDidMount(){
    return fetch('<a href="https://api.mlab.com/api/1/databases/ibrhmklnc/collections/kitap?apiKey=xRw1H6NNZZnyeZArU5L8oUoVcsFb6tpf" rel="nofollow noreferrer">https://api.mlab.com/api/1/databases/ibrhmklnc/collections/kitap?apiKey=xRw1H6NNZZnyeZArU5L8oUoVcsFb6tpf</a>')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          dataSource: responseJson.movies,
        }, function(){
        });
      })
      .catch((error) =>{
        console.error(error);
      });   }</p>

<p>render(){</p>

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

1 Ответ

0 голосов
/ 03 февраля 2019

Вот полный ответ от 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: responseJson[0].movies,
...