React setState is undefined?

Question

我有一个从浏览器导航器函数到天气api的简单获取位置。我不明白为什么纬度和经度的控制台都能工作，但当我设置状态时，它会对我大喊大叫，说TypeError: Cannot read property 'setState' of undefined.未捕获

为了更清楚这两个控制台，我得到了的位置

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

Answer 1

在navigator对象中很简单，你不能访问这个对象，因为它有窗口对象的引用。因此，我在promise中使用navigator，如果navigator给了我纬度和经度，那么我会解决我的promise，如果不拒绝promise并返回promise。

在ComponentDidMount中，我使用wait调用函数，因为它会返回promise，之后我有值，然后我设置状态

并调用另一个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>
);
}
}

Answer 2

我只需要在组件挂载外部创建函数，然后像下面的一样在内部简单地调用它

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