javascript - 使用 es6 和 React 未定义函数

Question

我在从其他文件调用函数时遇到未定义的情况，我正在使用 webpack、babel、es6 和 React，根据标准，我认为我做的事情是正确的，但这就是我所做的在控制台中看到

TypeError:_openWeatherMap.getTemp(...) 未定义[Saber más] bundle.js:25033:9 得到 XHR 来自请求的响应 [HTTP/1.1 200 OK 232ms]//无论未定义，请求都会发出

这是我的文件

//open-weather-map.js

import axios from 'axios';

const OPEN_WEATHER_MAP_URL = 'http://api.openweathermap.org/data/2.5/weather?appid=*************&units=metric';

export function getTemp(location) {
  var encodedLocation = encodeURIComponent(location);
  var requestUrl = `${OPEN_WEATHER_MAP_URL}&q=${encodedLocation}`;
  axios.get(requestUrl).then((res) => {
    if(res.data.cod && res.data.message) {
      throw res.data.cod;
    } else {
      return res.data.main.temp;
    }
  }, (res) => {
    throw (res && ((res.response && res.response.data && (res.response.data.message || res.response.data)) || (res.code))) || res;
  });
};


//weather.js


import React, { Component } from 'react';
import WeatherForm from 'weather-form';
import WeatherMessage from 'weather-message';
import { getTemp } from 'open-weather-map';

class Weather extends Component {
  constructor(props) {
    super(props);
    this.state = {
      location: 'Miami',
      temp: 88
    };
  }
  handleSearch(location) {
    var that = this;

    getTemp(location).then((temp) => {
      that.setState({ location, temp });
    }, (err) => {
      alert(err);
    });
  }
  render() {
    let {location, temp} = this.state;
    return (<div>
      <h3>Weather component</h3>
      <WeatherForm onSearch={this.handleSearch.bind(this)}/>
      <WeatherMessage location={location} temp={temp}/>
    </div>);
  }
}

export default Weather;


//webpack.config.js
module.exports = {
  entry: './app/app.jsx',
  output: {
    path: __dirname,
    filename: './public/bundle.js'
  },
  resolve: {
    root: __dirname,
    alias: {
      main: 'app/components/main.js',
      nav: 'app/components/nav.js',
      weather: 'app/components/weather.js',
      about: 'app/components/about.js',
      examples: 'app/components/examples.js',
      'weather-form': 'app/components/weather-form.js',
      'weather-message': 'app/components/weather-message.js',
      'open-weather-map': 'app/api/open-weather-map.js'
    },
    extensions: ['', '.js', '.jsx']
  },
  module: {
    loaders: [{
      loader: 'babel-loader',
      query: {
        presets: ['react', 'es2015', 'stage-0']
      },
      test: /\.jsx?$/,
      exclude: /(node_modules|bower_components)/
    }]
  }
};

我希望你能帮助我，因为我在这里浪费了我的机会，提前非常感谢你的好意帮助。

Answer 1

您需要在 getTemp 方法中返回 axios.get(...)。

函数的隐式返回值是未定义。因此，您尝试访问 undefined 的 .then()，因此会出现错误。

//open-weather-map.js

import axios from 'axios';

const OPEN_WEATHER_MAP_URL = 'http://api.openweathermap.org/data/2.5/weather?appid=*************&units=metric';

export function getTemp(location) {
  var encodedLocation = encodeURIComponent(location);
  var requestUrl = `${OPEN_WEATHER_MAP_URL}&q=${encodedLocation}`;

  return axios.get(requestUrl).then((res) => {
    if(res.data.cod && res.data.message) {
      throw res.data.cod;
    } else {
      return res.data.main.temp;
    }
  }, (res) => {
    throw (res && ((res.response && res.response.data && (res.response.data.message || res.response.data)) || (res.code))) || res;
  });
};