时间戳

首页 > 解决方案 > 使用 Laravel 作为后端在 React Native 中获取数据时出错

javascript - 使用 Laravel 作为后端在 React Native 中获取数据时出错

问题描述

我使用 laravel 作为我的后端，并且我已经测试了所有方法并且它可以工作。我已经使用我的 laravel 作为后端的 postman 对其进行了测试，并且它可以工作。但是当我在 react native 中尝试它时，它根本不起作用。我还是新手反应原生。

这是我在 RN 中的 PinjamList.js 代码：

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',
    }
});

这是一个用于获取数据的 js 文件：

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

而这一段是在首页展示数据的代码：

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

但是当我尝试测试它以确保它是否正确时，显示此错误：

网络请求失败
- 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 个堆栈帧

标签： javascriptphpreact-nativelaravel-5postman

解决方案

第一件事：API 什么是 HTTP 方法？第二件事：如果方法是，get请添加有关浏览器或邮递员结果的屏幕截图

推荐阅读