使用 es6 的未定义函数并做出反应

Question

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

TypeError: _openWeatherMap.getTemp(...) 未定义[Saber más] bundle.js:25033:9 得到 XHR response from request [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() 的 undefined，因此出现错误。

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