尝试使用axios方法GET和本地IP在React Native本机上获取数据。
使用XAMPP在本地主机上运行URL可以在Web上正常运行。
但是，当尝试在React Native上使用api调用获取数据时，会在console.log（）上将((2*)^n) 1 = ((2*) . (2*) . ... . (2*)) 1
= 2* ( 2* ( ... ( 2* 1 )...))
= 2^n , for n in [0..]
显示为response.data
以下是以下代码段：
登录屏幕成功在console.log（）上显示用户令牌和用户类型。
SignInScreen.js
null但是，在FreelancerScreen上， 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'
},
});
显示了response.data。
FreelancerScreen.js
null答案 0 :(得分：0)
如@ZeeshanAnsari所述，设置和获取令牌时存在问题。
免责声明：
但是，FreelancerScreen.js上的response.data仍显示null。
因此，如果有人可以帮助解决这个问题，那将是很好的。
以下是允许AsyncStorage.getItem（）获取令牌的以下更改：
SignInScreen.js
AsyncStorage.setItem('my_token', response.data.token);
AsyncStorage.setItem('u_type', response.data.type);
FreelancerScreen.js
getAppointmentList = () => {
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: ', response);
console.log('Response Data: ', response.data);
})
.catch(function (error) {
console.log('Error Response: ', error.response);
});
}, (error) => {
console.log('error error!', error) //Display error
});
}