Как получить данные API от https://covid19.mathdro.id/api?? я пытаюсь вставить эти данные в мое приложение. js

Question

import React from 'react';

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

class Global extends React.Component{

    constructor(){

        super();

       this.state = {


          global: [],

           refreshing: false



       }

   }



   renderItem = ({item}) => (

   <View style={{ padding: 20, borderBottomWidth: 1, borderBottomColor: '#000'}}>

       <Text> Positif: {item.confirmed.value}   </Text>

       <Text> Sembuh: {item.recovered}  </Text>

       <Text> Meninggal: {item.deaths}  </Text>



   </View>



   )



   onRefresh = () => {

       this.getDataApi();



   }

   componentDidMount = () => {

       this.getDataApi();

   }



   getDataApi = async () => {

       this.setState({ refreshing: true})

       fetch('https://covid19.mathdro.id/api')

       .then(response => response.json())

       .then(json => this.setState({  global: json.confirmed.value }))





   }





   render(){
        console.log(this.state.global);



       return (

           <View>



           <FlatList 

               data={this.state.global}

               keyExtractor= {item => item.toString()}

               renderItem= {this.renderItem}

               refreshing={this.state.refreshing}

               onRefresh={this.onRefresh}

               />

           </View>

       )

   }
}


export default Global; 

Это мой код

Answer 1

Ответ, который вы получаете от API, является объектом, и вам необходимо использовать плоский список, поскольку вы просто показываете три текста здесь, вы можете сделать что-то вроде этого:

import React from 'react';
import {View , Text, FlatList } from 'react-native';
class Global extends React.Component{

    constructor(){
        super();
       this.state = {
          global: {},
         refreshing: false
       }
   }
   componentDidMount = () => {
       this.getDataApi();
   }



   getDataApi = async () => {
       this.setState({ refreshing: true})
       fetch('https://covid19.mathdro.id/api')

       .then(response => response.json())

       .then(json => {
           this.setState({  global: json })
        })
   }

   render(){
       return (
           <View style={{flex:1,justifyContent:"center",alignItems:"center"}}>
               {this.state.global.confirmed != undefined ? <Text> Positif: {this.state.global.confirmed.value}   </Text> : null}
               {this.state.global.confirmed != undefined ? <Text> Sembuh: {this.state.global.recovered.value}   </Text> : null}
               { this.state.global.confirmed != undefined ? <Text> Meninggal: {this.state.global.deaths.value}   </Text> : null}
           </View>
       )
   }
}


export default Global; 

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