Error Fetching Data in React Native with Laravel as a Back-End
Hello Mr./Mrs. Talyssonoc 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. 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 ( <View style={styles.pinjamList}> {this.props.pinjams.map((pinjam) => { return ( <View key={pinjam.no_pengajuan}> <Text style={styles.pinjamtext}>{pinjam.ketua_kegiatan} | { pinjam.lab }</Text> </View> ) })} </View> ); } }
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`
For some reason, I've looked for my DB also with my Laravel. I hope you can help me to figure out this problem because I am still learning in building this react native app. Thank you so much.