[英]Undefined function by using es6 and react
我從其他文件調用函數時得到一個未定義,我正在使用webpack,babel,es6並做出反應,根據標准我認為我正在做正確的事情,但這就是我在安慰
TypeError:_openWeatherMap.getTemp(...)未定義[Sabermás] bundle.js:25033:9 GET 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)/
}]
}
};
我希望你可以幫助我,因為我浪費了我的機會,提前感謝你的親切幫助。
您需要在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;
});
};
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.