我有这个简单的从浏览器导航仪获取位置的功能到一个天气api。我不明白为什么经度和纬度两个控制台都能用,但当我做setState时,它对我大喊说uncaught(未捕获)。TypeError: Cannot read property 'setState' of undefined.
为了更清楚地了解这2个控制台,我得到的位置。
console.log(position.coords.latitude)
console.log(position.coords.longitude)
但这是说不能把未定义的东西传递给setState。
this.setState({lat:position.coords.latitude,lon:position.coords.longitude})
import React from 'react';
import axios from 'axios';
import WeatherGadget from './weather.component'
export default class WeatherApi extends React.Component {
constructor(props) {
super(props);
this.state = { city: null,lat:0,lon:0,wind:0,weather:0,icon:null };
}
componentDidMount() {
const location = ()=>{navigator.geolocation.getCurrentPosition(function(position) {
console.log(position.coords.latitude)
console.log(position.coords.longitude)
this.setState({lat:position.coords.latitude,lon:position.coords.longitude})
//Uncaught TypeError: Cannot read property 'setState' of undefined
})}
location();
const url = `https://api.openweathermap.org/data/2.5/onecall?lat=${this.state.lat}&lon=${this.state.lon}&appid=8821HIDDEN4e9d78`;
const getWeather = async ()=>{
let res = await axios.get(url)
const weatherObj = res.data;
console.log("===",weatherObj)
const currentWeather = weatherObj.current.temp
const windSpeed = weatherObj.current.wind_speed
const icon = weatherObj.current.weather[0].icon
this.setState({wind:windSpeed,weather:currentWeather,icon:icon})
}
getWeather()
}
render() {
return (
<div >
<WeatherGadget city={this.state.city} wind ={this.state.wind} weather={this.state.weather} icon={this.state.icon}/>
</div>
)
}
}
这很简单,在导航仪对象中,你不能访问这个对象,因为它有窗口对象的引用,所以我在承诺中使用导航仪对象,如果导航仪给我经纬度,那么我解决我的承诺,如果不拒绝承诺并返回承诺。
在 ComponentDidMount
我使用 await 调用函数,因为它给我返回承诺,之后我有了值,然后我设置了状态。
然后打电话给其他的人 getWeather
功能
import React from "react";
import axios from "axios";
// import WeatherGadget from './weather.component'
export default class WeatherApi extends React.Component {
constructor(props) {
super(props);
this.state = {
city: null,
lat: 0,
lon: 0,
wind: 0,
weather: 0,
icon: null
};
}
async componentDidMount() {
const location = await this.location();
location && this.setState({ lat: location.lat, lon: location.long });
location && this.getWeather();
}
location = () => {
//return the promise that contain the navigator object
return new Promise((resolve, reject) => {
try {
navigator.geolocation.getCurrentPosition(position => {
resolve({
lat: position.coords.latitude,
long: position.coords.longitude
});
});
} catch (error) {
let temp = {
lat: 24.8607,
long: 67.0011
};
reject(temp);
}
});
};
//calling weather api
getWeather = async () => {
const url = `https://api.openweathermap.org/data/2.5/onecall?lat=${
this.state.lat
}&lon=${this.state.lon}&appid=8821HIDDEN4e9d78`;
console.log("url", url);
try {
const res = await axios.get(url);
if (res) {
console.log("res", res.data)
const weatherObj = res.data;
console.log("===", weatherObj);
const currentWeather = weatherObj.current.temp;
const windSpeed = weatherObj.current.wind_speed;
const icon = weatherObj.current.weather[0].icon;
this.setState({ wind: windSpeed, weather: currentWeather, icon: icon });
}
} catch (error) {
console.log("error", error)
}
};
render() {
return (
<div>
{/* <WeatherGadget city={this.state.city} wind ={this.state.wind} weather={this.state.weather} icon={this.state.icon}/> */}
<p> Lat: {this.state.lat}</p>
<p> Lng: {this.state.lon}</p>
<p> Weather: {this.state.weather}</p>
<p>Wind: {this.state.wind}</p>
</div>
);
}
}
我只需要在组件挂载之外创建一个函数,然后在里面简单地调用它,就像下面这样。
import React from 'react';
import axios from 'axios';
import WeatherGadget from './weather.component'
export default class WeatherApi extends React.Component {
constructor(props) {
super(props);
this.state = { city: null, lat: 0, lon: 0, wind: 0, weather: 0, icon: null };
}
location = () => {
navigator.geolocation.getCurrentPosition((position) => {
this.setState({ lat: position.coords.latitude, lon: position.coords.longitude })
//Uncaught TypeError: Cannot read property 'setState' of undefined
const url = `https://api.openweathermap.org/data/2.5/onecall?lat=${this.state.lat}&lon=${this.state.lon}&appid=8821a871fa3513caf66ad2e8ab4e9d78`;
console.log("====url", url)
const getWeather = async () => {
let res = await axios.get(url)
const weatherObj = res.data;
console.log("===", weatherObj)
const currentWeather = weatherObj.current.temp
const windSpeed = weatherObj.current.wind_speed
const icon = weatherObj.current.weather[0].icon
this.setState({ wind: windSpeed, weather: currentWeather, icon: icon })
}
getWeather()
})
}
componentDidMount() {
this.location();
}
render() {
return (
<div >
<WeatherGadget city={this.state.city} wind={this.state.wind} weather={this.state.weather} icon={this.state.icon} />
</div>
)
}
}