Javascript React本机AXIOS方法获取响应。数据显示为null
正在尝试使用axios方法get和本地IP获取有关React Native的数据 使用XAMPP在本地主机上运行URL在web上运行良好 但是,当尝试在React Native上使用api调用获取数据时,它在console.log()上将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.
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,
},*/