Javascript React本机AXIOS方法获取响应。数据显示为null

Javascript React本机AXIOS方法获取响应。数据显示为null,javascript,react-native,axios,Javascript,React Native,Axios,正在尝试使用axios方法get和本地IP获取有关React Native的数据 使用XAMPP在本地主机上运行URL在web上运行良好 但是,当尝试在React Native上使用api调用获取数据时,它在console.log()上将response.data显示为null 下面是代码片段: 登录屏幕成功显示console.log()上的用户令牌和用户类型 signnscreen.js 我可以在axios中将方法视为post,请检查axios中的方法post是否用于SignInScreen.

正在尝试使用axios方法get和本地IP获取有关React Native的数据

使用XAMPP在本地主机上运行URL在web上运行良好

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

下面是代码片段:

登录屏幕成功显示console.log()上的用户令牌和用户类型

signnscreen.js


我可以在axios中将方法视为post,请检查axios中的方法post是否用于SignInScreen.js登录。然而,问题是来自freegorscreen.js。问题可能在于授权:AsyncStorage.getItem('my_token')hi@ZeeshanAnsari,我也有同样的想法,但仍然不能完全确定。尽管如此,您能否提供一种正确的方式来设置授权以获取令牌?谢谢。你能用请求截图发布你的本地主机响应吗
    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': 'zzzz',
            },
        })
            .then(function (response) {
                if (response.data) {
                    AsyncStorage.setItem('my_token', response.token);
                    AsyncStorage.setItem('u_type', response.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'
    },
});
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 = () => {
            var self = this;
            axios({
                method: 'get',
                url: Constants.API_URL + 'appointment_f/flist/',
                responseType: 'json',
                headers: {
                    'X-API-KEY': 'zzzz',
                    Authorization: AsyncStorage.getItem('my_token'),
                },
            })
                .then(function (response) {
                    console.log('Response Data: ', response.data);
                })
                .catch(function (error) {
                    console.log('Error Response: ', error.response);
                });
        };

        clearAsyncStorage = async () => {
            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,
    },*/