javascript - React Native Axios 使用 GET 方法获取 NULL response.data

Question

尝试使用 axios 方法 GET 和本地 IP 在 React Native 本机上获取数据。

使用 XAMPP 在 localhost 上运行 URL 可以在 Web 上正常工作。

但是当尝试在 React Native 上使用 api 调用获取数据时，它显示response.data为nullconsole.log()

问题：FreelancerScreen.jsresponse.data上 的显示. 因此，如果有人可以帮助解决这个问题，那就太好了。null

下面提供的代码片段：

SignInScreen.js

    import React, { Component } from 'react';
import { StyleSheet, ScrollView, View, TextInput, } from 'react-native';
import { mapping, light as lightTheme, dark as darkTheme } from '@eva-design/eva';
import { ApplicationProvider, Layout, Text, Input, Button } from 'react-native-ui-kitten';

import Constants from '../constants/Constants';
import axios from 'axios';
import AsyncStorage from '@react-native-community/async-storage';

export default class SignInScreen extends Component {
    static navigationOptions = {
        title: 'Sign In',
    };

    constructor(props) {
        super(props);
        this.state = {
            userName: 'freelancer',
            password: 'password',
        }
    }

    login() {
        console.log('Sign In Pressed');
        var self = this;
        axios({
            method: 'post',
            url: Constants.API_URL + 'auth/login/',
            data: {
                user_name: this.state.userName,
                password: this.state.password,
            },
            headers: {
                'X-API-KEY': 'xxxxx',
            },
        })
            .then(function (response) {
                if (response.data) {
                    AsyncStorage.setItem('my_token', response.data.token);
                    AsyncStorage.setItem('u_type', response.data.type);
                    //self.props.navigation.navigate('UserHome');
                    self.props.navigation.navigate('Freelancer');
                    console.log("Login Sucessful (response.data) ===> ", response.data);
                } else {
                    console.log('Login attempt Failed');
                }
            })
            .catch(function (error) {
                console.log(error)
                console.log('Error Response', error.response)
            });
    }

    render() {
        const { navigate } = this.props.navigation;

        return (
            <ApplicationProvider
                mapping={mapping}
                theme={lightTheme}>
                <Layout style={styles.container} level='1'>
                    <ScrollView>
                        <Text style={styles.text} category='h4'>Sign Up with Email</Text>
                        <TextInput label={'USERNAME'}
                            placeholder={'username'}
                            autoCapitalize='none'
                            style={styles.input}
                            onChangeText={userName => this.setState({ userName })}
                            value={this.state.userName} />

                        <TextInput label={'PASSWORD'}
                            placeholder={'Password'}
                            autoCapitalize='none'
                            style={styles.input}
                            onChangeText={password => this.setState({ password })}
                            value={this.state.password} />
                        <Button style={styles.button} onPress={() => this.login()}>SIGN IN</Button>
                    </ScrollView>
                </Layout>
            </ApplicationProvider>
        );
    }
}

const styles = StyleSheet.create({
    button: {
        marginTop: 15,
        marginLeft: 16,
        marginRight: 16
    },
    container: {
        flex: 1,
    },
    input: {
        marginLeft: 16,
        marginRight: 16,
        marginBottom: 15
    },
    text: {
        marginVertical: 16,
        textAlign: 'center'
    },
});

FreelancerScreen.js

import React, { Component } from 'react';
import { View, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
import axios from 'axios';
import Constants from '../constants/Constants';
import AsyncStorage from '@react-native-community/async-storage';

export default class FreelancerScreen extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],

            //-test
            totalBooked: null,
            dateStart: null,
        };
        console.log('Constructor()');
    }

    componentDidMount() {
        this.getAppointmentList();
        console.log('ComponentDidMount()')
    }

    getAppointmentList = () => {
        let self = this;
        AsyncStorage.getItem('my_token').then((keyValue) => {
            console.log('Freelancer Screen (keyValue): ', keyValue); //Display key value
            axios({
                method: 'get',
                url: Constants.API_URL + 'appointment_f/flist/',
                responseType: 'json',
                headers: {
                    'X-API-KEY': 'xxxxx',
                    //Authorization: `Bearer ${keyValue}`,
                    Authorization: keyValue,
                },
            })
                .then(function (response) {
                    console.log('response.data: ===> ', response.data)
                    console.log('Response: ', response);
                    self.setState({
                        dataSource: response.data,
                    })
                })
                .catch(function (error) {
                    console.log('Error Response: ', error.response);
                });
        }, (error) => {
            console.log('error error!', error) //Display error
        });
    }

    clearAsyncStorage = async () => {
        await AsyncStorage.clear();
        this.props.navigation.navigate('SignIn');
        console.log('Logged Out.')
    }

    render() {
        const { dataSource } = this.state;
        return (
            <View>
                <Text style={{ marginLeft: 20 }}> FreelancerScreen </Text>
                <TouchableOpacity onPress={() => this.clearAsyncStorage()}>
                    <Text style={{ margin: 20, fontSize: 25, fontWeight: 'bold' }}>LogOut</Text>
                </TouchableOpacity>
                {<FlatList
                    data={dataSource}
                    renderItem={({ item }) => {
                        return (
                            <View>
                                <Text style={{ marginLeft: 20 }}>date_start: {item.date_start}</Text>
                                <Text style={{ marginLeft: 20 }}>total_booked: {item.total_booked}</Text>
                            </View>
                        );
                    }}
                />}
            </View>
        );
    }
};



/*data: {
    total_booked: this.state.totalBooked,
    date_start: this.state.dateStart,
},*/

截图（React-native）： 控制台截图

屏幕截图（网络本地主机）： 标头 标头 2 预览 响应

更新：我 log_message 后端代码并得到错误，例如尝试获取非对象和未定义索引的属性

标签： javascriptreact-nativeaxios