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

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

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

谢谢

4

1 回答 1

0

试试这个，改变要求：

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

至：

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

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

于 2018-06-30T00:35:53.570 回答