我正在构建一个React应用,它使用Axios。问题是这在上个月一直有效,但现在突然停止了工作。这个错误对我来说毫无意义,因为它以前可以正常工作。
错误状态为Unhandled Rejection (TypeError): api.getUser is not a function
这是包含axios,api.js的文件:
import axios from 'axios';
import key from './keys';
import URL from './url';
export function login() {
let url = URL + '/helix/login/';
return axios.get(url, {headers: {'Api-Key': key}}).then(res => {
window.location = res.data.authorization_url;
});
}
export function authLogin(data) {
let url = URL + '/helix/socialauth/login/';
return axios.post(url, data, {headers: {'Api-Key': key}}).then(res => res);
}
export function consent(data, header) {
let url = URL + '/user/profile/';
return axios.put(url, data, {headers: header}).then(res => res);
}
export function getUser(header) {
let url = URL + '/user/profile/';
return axios.get(url, {headers: header}).then(res => res);
}
export function updateUser(data, header) {
let url = URL + '/user/profile/';
return axios.put(url, data, {headers: header}).then(res => res);
}
export function getAcct(header) {
let url = URL + '/helix/account/';
return axios.get(url, {headers: header}).then(res => res);
}
export function getTraits(header) {
let url = URL + '/genomics/traits/summary/';
return axios.get(url, {headers: header}).then(res => res);
}
export function getTraitDetails(header, id) {
let url = URL + '/genomics/traits/' + id + '/';
return axios.get(url, {headers: header}).then(res => res);
}
export function getCancers(header) {
let url = URL + '/genomics/explore/';
return axios.get(url, {headers: header}).then(res => res);
}
export function getGenomics(header) {
let url = URL + '/genomics/home/';
return axios.get(url, {headers: header}).then(res => res);
}
export default {login, authLogin, consent, getUser, updateUser, getAcct, getTraits, getTraitDetails, getCancers, getGenomics};
这里是使用这些文件的文件,它是React 14,UserContext.js的Context API的一部分:
import React from 'react';
import moment from 'moment';
// Utilities
import apikey from '../config/keys';
import history from '../config/history';
const api = require('../config/api');
// Create a context with default values
export const UserContext = React.createContext({
first_name: null,
last_name: null,
email: null,
birthday: null,
gender: null,
access_token: null,
helix_user_id: null,
uuid: null,
key: null,
status: 'register',
loading: false,
accepted_terms: false,
delivery_date: null,
data_available: false,
kit_processing: false,
kit_registered: false,
traits_processed: false,
ldt_status: null,
userVisits: 0,
cancer_groups: null,
userTraits: [],
userVariants: false,
pos_trait_details: null,
pos_trait_user: null,
pos_trait_modules: null,
});
// This is the consumer of the values (state)
export const UserConsumer = UserContext.Consumer;
// Create a provider (wrapper that handles the logic)
// This also allows communication to context and update
// state values throughout app with user info
export class UserProvider extends React.Component {
constructor(props) {
super(props);
this.state = {
first_name: null,
last_name: null,
email: null,
birthday: null,
gender: null,
access_token: null,
helix_user_id: null,
uuid: null,
key: null,
status: 'register',
loading: false,
accepted_terms: false,
data_available: false,
delivery_date: null,
kit_processing: false,
kit_registered: false,
traits_processed: false,
ldt_status: null,
userVisits: 0,
cancer_groups: [],
userTraits: [],
userVariants: false,
pos_trait_details: [],
pos_trait_user: null,
pos_trait_modules_0: null,
pos_trait_modules_1: null,
pos_trait_modules_2: null,
pos_trait_modules_3: null,
pos_trait_modules_4: null,
pos_trait_modules_5: null,
pos_trait_modules_6: null,
};
this.get = this.get.bind(this);
this.update = this.update.bind(this);
this.updateConsent = this.updateConsent.bind(this);
this.getAccount = this.getAccount.bind(this);
this.logout = this.logout.bind(this);
this.checkUserVisits = this.checkUserVisits.bind(this);
this.getTraits = this.getTraits.bind(this);
this.checkLastVisit = this.checkLastVisit.bind(this);
this.getTraitDetails = this.getTraitDetails.bind(this);
}
componentDidMount() {
let revisit = localStorage.getItem('giraffeToken');
let test = 'state';
let location = window.location.href;
if(revisit !== null) {
this.checkLastVisit(revisit);
}
if(revisit === null &&
(location.includes('dashboard')
|| location.includes('profile')
|| location.includes('register')
|| location.includes('consent')
|| location.includes('gene')
|| location.includes('results-prep'))) {
this.setState({loading: true});
localStorage.removeItem('giraffeDate');
localStorage.removeItem('giraffeKey');
localStorage.removeItem('giraffeStatus');
localStorage.removeItem('giraffeToken');
setTimeout(() => {
this.setState({loading:false});
}, 1000);
history.push('/');
window.location.reload();
}
if(location.includes(test)) {
this.setState({loading: true});
let queryParams = location.split('?')[1];
let params = queryParams.split('&');
let pair = null;
let code;
let state;
params.forEach(param => {
pair = param.split('=');
if(pair[0] === 'code') {
code = pair[1];
}
if(pair[0] === 'state') {
state = pair[1];
}
});
let data = {code: code, state: state};
api.authLogin(data).then(({data: {account, key, status}}) => {
this.setState({
key: key,
first_name: account.first_name,
last_name: account.last_name,
email: account.email,
access_token: account.access_token,
helix_user_id: account.helix_user_id,
uuid: account.uuid,
status: status,
loading: false
});
let header = {
'Api-Key': apikey,
'Authorization': 'Token ' + key
};
api.getUser(header).then(({data: {birthday, gender}}) => {
this.setState({
birthday: birthday,
gender: gender,
});
});
api.getCancers(header).then(({data: {cancer_groups}}) => {
this.setState({
cancer_groups: cancer_groups,
loading: false
})
});
api.getGenomics(header).then((data) => {
console.log(data)
})
let d = moment().format('x');
localStorage.setItem('giraffeToken', account.access_token);
localStorage.setItem('giraffeKey', key);
localStorage.setItem('giraffeDate', d);
localStorage.setItem('giraffeStatus', status);
history.push('/profile');
});
}
}
shouldComponentUpdate(nextProps, nextState) {
return true;
}
get() {
api.login();
}
update() {
let data = {
};
let header = {
'Api-Key': apikey,
'Authorization': 'Token ' + this.state.key
};
api.updateUser(data, header);
}
updateConsent() {
let data = {
accepted_terms: true
};
let header = {
'Api-Key': apikey,
'Authorization': 'Token ' + this.state.key
};
api.consent(data, header).then(({data: {accepted_terms}}) => {
this.setState({
accepted_terms: accepted_terms,
status: 'login',
loading: true
});
setTimeout(() => {
this.setState({loading: false});
history.push('/profile');
}, 1000);
});
}
getAccount() {
this.setState({loading: true});
let header = {
'Api-Key': apikey,
'Authorization': 'Token ' + this.state.key
};
api.getAcct(header).then(({data: {status: {data_available, kit_processing, kit_registered, traits_processed, ldt_status, delivery_date}}}) => {
this.setState({
delivery_date: delivery_date,
data_available: data_available,
kit_processing: kit_processing,
kit_registered: kit_registered,
traits_processed: traits_processed,
ldt_status: ldt_status,
});
this.checkUserVisits();
});
this.setState({loading: false});
}
checkUserVisits() {
if(this.state.data_available && this.state.kit_registered && this.state.kit_processing && this.state.traits_processed) {
let visits = localStorage.getItem('visits');
if(visits === null || visits === undefined) {
localStorage.setItem('visits', 0);
}
else if(visits === '0') {
let visit = parseInt(visits, 10);
localStorage.setItem('visits', (visit + 1));
this.setState({userVisits: (visit + 1)});
}
}
}
checkLastVisit(revisit) {
let lastLogin = parseInt(localStorage.getItem('giraffeDate'), 10);
let token = localStorage.getItem('giraffeKey');
let giraffeStatus = localStorage.getItem('giraffeStatus');
let now = moment();
if(now.diff(lastLogin, 'days') >= 1) {
this.setState({loading: true});
localStorage.removeItem('giraffeDate');
localStorage.removeItem('giraffeKey');
localStorage.removeItem('giraffeStatus');
localStorage.removeItem('giraffeToken');
setTimeout(() => {
this.setState({loading:false});
}, 1000);
history.push('/');
window.location.reload();
}
else {
this.setState({loading: true});
let header = {
'Api-Key': apikey,
'Authorization': 'Token ' + token
};
api.getAcct(header).then(({data, data: {first_name, last_name, email, helix_user_id, uuid, status}}) => {
this.setState({
access_token: localStorage.getItem('giraffeToken'),
key: token,
first_name: first_name,
last_name: last_name,
email: email,
helix_user_id: helix_user_id,
uuid: uuid,
status: giraffeStatus,
delivery_date: status.delivery_date,
data_available: status.data_available,
kit_processing: status.kit_processing,
kit_registered: status.kit_registered,
traits_processed: status.traits_processed,
ldt_status: status.ldt_status,
userVisits: parseInt(localStorage.getItem('visits'), 10)
});
}).catch((err) => {
console.log('acct err: ', err);
this.setState({loading: true});
localStorage.removeItem('giraffeDate');
localStorage.removeItem('giraffeKey');
localStorage.removeItem('giraffeStatus');
localStorage.removeItem('giraffeToken');
localStorage.removeItem('visits');
setTimeout(() => {
this.setState({loading:false});
}, 1000);
history.push('/');
window.location.reload();
});
api.getUser(header).then(({data: {birthday, gender}}) => {
this.setState({
birthday: birthday,
gender: gender,
});
});
api.getTraits(header).then(({data}) => {
let variant = data.filter(item => item.user_trait.genotype_sum > 0);
if(variant.length > 0) {
this.setState({
userTraits: data,
userVariants: true
});
}
else {
this.setState({
userTraits: []
});
}
}).catch((err) => {
console.log('traits error: ', err);
this.setState({loading: true});
localStorage.removeItem('giraffeDate');
localStorage.removeItem('giraffeKey');
localStorage.removeItem('giraffeStatus');
localStorage.removeItem('giraffeToken');
localStorage.removeItem('visits');
setTimeout(() => {
this.setState({loading:false});
}, 1000);
history.push('/');
window.location.reload();
});
api.getCancers(header).then(({data: {cancer_groups}}) => {
this.setState({
cancer_groups: cancer_groups
})
});
setTimeout(() => {
history.push('/profile');
this.setState({loading: false});
}, 1000);
}
}
getTraits() {
this.setState({loading: true});
// Get user results and based on results show the appropriate dashboard
let header = {
'Api-Key': apikey,
'Authorization': 'Token ' + this.state.key
};
api.getTraits(header).then(({data}) => {
let variant = data.filter(item => item.user_trait.genotype_sum > 0);
if(variant.length > 0) {
this.setState({
userTraits: data,
userVariants: true
});
}
else {
this.setState({
userTraits: []
});
}
});
setTimeout(() => {
this.setState({loading: false});
}, 1000);
}
logout() {
this.setState({loading: true});
localStorage.removeItem('giraffeDate');
localStorage.removeItem('giraffeKey');
localStorage.removeItem('giraffeStatus');
localStorage.removeItem('giraffeToken');
setTimeout(() => {
this.setState({loading:false});
}, 1000);
history.push('/');
window.location.reload();
}
getTraitDetails(id) {
let header = {
'Api-Key': apikey,
'Authorization': 'Token ' + this.state.key
};
api.getTraitDetails(header, id).then(({data: {modules, user_trait, trait}}) => {
this.setState({
pos_trait_details: trait,
pos_trait_user: user_trait,
pos_trait_modules: modules
});
for(let i = 0; i < modules.length; i ++) {
let name = 'pos_trait_modules_' + i;
let age_groups = 'pos_trait_modules_' + i + '_age_groups';
let body = 'pos_trait_modules_' + i + '_body';
let icon = 'pos_trait_modules_' + i + '_icon';
let image = 'pos_trait_modules_' + i + '_image';
let item_type = 'pos_trait_modules_' + i + '_item_type';
let title = 'pos_trait_modules_' + i + '_title';
let url = 'pos_trait_modules_' + i + '_url';
let url_title = 'pos_trait_modules_' + i + '_url_title';
let items = 'pos_trait_modules_' + i + '_items';
// console.log(Object.values(modules[i])[0]);
if(Object.values(modules[i])[0] !== null) {
this.setState({
[name]: Object.values(modules[i])[0],
[age_groups]: Object.values(modules[i])[0].age_groups,
[body]: Object.values(modules[i])[0].body,
[icon]: Object.values(modules[i])[0].icon,
[image]: Object.values(modules[i])[0].image,
[item_type]: Object.values(modules[i])[0].item_type,
[title]: Object.values(modules[i])[0].title,
[url]: Object.values(modules[i])[0].url,
[url_title]: Object.values(modules[i])[0].url_title,
[items]: Object.values(modules[i])[0].items
});
}
}
});
}
render() {
return (
<UserContext.Provider
value={{user: this.state,
get: this.get,
update: this.update,
updateConsent: this.updateConsent,
getAccount: this.getAccount,
logout: this.logout,
getTraits: this.getTraits,
getTraitDetails: this.getTraitDetails
}}
>
{this.props.children}
</UserContext.Provider>
);
}
}
我花了最后一个小时试图找出问题,但无济于事。任何帮助将不胜感激。
我已经查看了导出的过程,或者是否正在进行其他操作但找不到任何东西。
谢谢
答案 0 :(得分:0)
尝试一下,更改要求:
const api = require('../config/api');
收件人:
import * as api from '../config/api'
如果不起作用,请将此console.log(api)
放在该行的后面,这可能是您的babel版本的问题。