lundi 8 juillet 2019

Error Fetching Data in React Native with Laravel as a Back-End

I was wondering if you could help me to solve this error. So I am using laravel as my back-end and I've tested all the method and it works tho. I already test it using postman for my laravel as a backend and it works. But when I try it in react native it didnt work at all. Please kindly help me to solve this error because I'm still new to react native.

** Here's my code for PinjamList.js in RN: **

import React, { Component } from 'react';
import { View, Text, StyleSheet} from 'react-native';
import PropTypes from 'prop-types';

export default class PinjamList extends Component {

static propTypes = {
pinjams: PropTypes.array.isRequired
};
render() {
return (

{this.props.pinjams.map((pinjam) => {
return (

{pinjam.ketua_kegiatan} | { pinjam.lab }

)
})}

);
}
}

const styles = StyleSheet.create({
pinjamList: {
flex: 1,
flexDirection: 'column',
justifyContent: 'space-around',
},
pinjamtext: {
fontSize: 24,
fontWeight: 'bold',
textAlign: 'center',
}
});

And this one is js file for fetching the data:

const URI = 'http://localhost:8000'; 
export default{ 
   async fetchDataPinjam(){ 
      try{ 
           let response = await fetch(URI + '/api/pinjams'); 
           let responseJsonData = await response.json(); return 
           responseJsonData; 
      } catch(e) { 
           console.log(e); 
  } 
 } 
}

And this one is the code for displaying the data on the homepage:

<View> { this.state.pinjams.length > 0 
? <PinjamList pinjams={this.state.pinjams} /> 
: <Text>Tidak Ada Peminjaman</Text> } </View>

But when I try to test it to make sure if its right, this error shown:

Network request failed
- node_modules\react-native\Libraries\vendor\core\whatwg-fetch.js:504:29 in onerror
- node_modules\event-target-shim\lib\event-target.js:172:43 in dispatchEvent
- ... 8 more stack frames from framework internals



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire