首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >未处理的拒绝(TypeError):api.getUser不是一个函数

未处理的拒绝(TypeError):api.getUser不是一个函数
EN

Stack Overflow用户
提问于 2018-06-30 06:56:57
回答 1查看 1.3K关注 0票数 1

我正在构建一个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的Context API的一部分,UserContext.js:

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>
    );
  }
}

我花了一个小时试图弄清楚这个问题,但无济于事。任何帮助都将不胜感激。

我已经查看了出口是如何发生的,或者是否发生了其他事情,但找不到任何东西。

谢谢

EN

回答 1

Stack Overflow用户

发布于 2018-06-30 08:35:54

尝试此操作,更改要求来自:

const api = require('../config/api');

至:

import * as api from '../config/api'

如果不起作用,就把这个console.log(api)放在那一行后面,这可能是你的巴别塔版本的问题。

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51110314

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档