在AJAX调用中无法读取未定义的属性“setState”

我试图从Dark Sky API获得jsonp响应，但我一直收到一个未定义的错误。 响应对象及其子对象显示在控制台上，但我无法将其置于该状态。

这里是更多的代码：

class Weather extends React.Component { constructor (props) { super(props); this.state = { value: '', //user input lat: 0, lon: 0, //coordinates data: {}, } this.getWeatherApi = this.getWeatherApi.bind(this); } getWeatherApi(lat,lon) { var url = `https://api.darksky.net/forecast/apikey/${lat},${lon}`; function setData(response) { console.log(response) this.setState({ data: response, }); } $.ajax({ url: url, dataType: 'jsonp', jsonpCallback: 'setData', success: function(response) { setData(response) } }); } getLocationApi(location) { var mapurl = `https://maps.googleapis.com/maps/api/geocode/json?address=${location}&key=${googlekey}`; axios.get(mapurl).then(response => { this.setState({ lat: response.data.results[0].geometry.location.lat, lon: response.data.results[0].geometry.location.lng, }) this.getWeatherApi(this.state.lat,this.state.lon); }).catch(function (error) { console.log(error); }); } 

我在getWeatherApi中使用了jquery，因为我想把它作为jsonp而axios不支持它。

Answer 1

您必须将该函数bind到外部context

 function setData(response) { console.log(response) this.setState({ data: response, }); }.bind(this) 

您也可以通过将变量this分配给另一个然后再使用它来以另一种方式实现此目的

 getWeatherApi(lat,lon) { var url = `https://api.darksky.net/forecast/apikey/${lat},${lon}`; var self = this; function setData(response) { console.log(response) self.setState({ data: response, }); } $.ajax({ url: url, dataType: 'jsonp', jsonpCallback: 'setData', success: function(response) { setData(response) } }); }