未处理的拒绝（TypeError）：api.getUser 不是函数

Posted 2023-04-14

【中文标题】未处理的拒绝（TypeError）：api.getUser 不是函数

【英文标题】：Unhandled Rejection (TypeError): api.getUser is not a function

【发布时间】：2018-12-09 03:43:29

【问题描述】：

我正在构建一个 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>
    );
  

我花了最后一个小时试图找出问题无济于事。任何帮助将不胜感激。

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

谢谢

【问题讨论】：

你的代码很“脏”，很难理解发生了什么。 console.log(api.getUser) 你试图在哪里获取数据，看看你得到了什么

【参考方案1】：

试试这个，改变需求：

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

收件人：

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

如果不起作用，请将 console.log(api) 放在该行之后，这可能是您的 babel 版本的问题。