gpt4 book ai didi

reactjs - React 函数未定义 no-undef

转载 作者:行者123 更新时间:2023-12-03 13:15:31 27 4
gpt4 key购买 nike

尝试编译我的应用程序时出现以下错误 - 'getRestaurants' 未定义 no-undef

我无法查明为什么没有为 zipCodeToCoords 定义 getRestaurants

我有一个输入组件,它在提交时获取邮政编码并调用 zipCodeToCoords,然后我想调用 getRestaurants

这是主要的 react 组件

class App extends Component {
constructor(props){
super(props);
this.state = {
restraunts:[],
selectedRestraunt:null
}
}


getRestaurants(lat,lon){
var url = "https://developers.zomato.com/api/v2.1/geocode?lat="+lat+"&lon="+lon;
$.ajax({
url:url,
headers:{
'Accept': 'application/json',
'user_key': 'MY KEY'
}

}).done(function(data){
console.log(data);
});
}


zipCodeToCoords(zip){
var url = "https://www.zipcodeapi.com/rest/MYKEY/info.json/"+ zip +"/degrees";
$.ajax({
url:url,

}).done(function(data){
console.log(data.lat);
getRestaurants(data.lat,data.lng);
});
}




render() {
return (
<div className="App">
<div className="row">
<div className="columns large-9">
<Input onSearchTermSubmit={this.zipCodeToCoords} />
</div>
</div>
<div className="row">
<div className="columns large-9">
<RestrauntInfo />
</div>
<div className="columns large-3">
<RestrauntList />
</div>
</div>
</div>
);
}
}

这是输入组件

class Input extends Component{

constructor(props){
super(props);
this.state = {zip:''};

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}


handleSubmit(event){
event.preventDefault();
this.props.onSearchTermSubmit(this.state.zip);
}
handleChange(event){
this.setState({zip:event.target.value});

}

render(){
return(<div>
<form onSubmit={this.handleSubmit}>
<div className="input-group">
<span className="input-group-label">Enter Zip Code</span>
<input className="input-group-field" type="number" value={this.state.zip} onChange={this.handleChange} />
<div className="input-group-button">
<input type="submit" className="button" value="Submit" />
</div>
</div>
</form>
</div>);
}
}

最佳答案

获取餐馆不是一些全局函数,它是您的 App 类上的一个方法,因此您需要这样调用它。解决这个问题最简单的方法可能是:

  1. 将完成回调更改为箭头函数
  2. zipCodeToCoords 中调用 this.getRestaurants
  3. 在构造函数中将 this 绑定(bind)到 getRestaurantszipCodeToCoords,即 this.getRestaurants = this.getRestaurants.bind(this);

回调将变为:

done((data) => {
console.log(data.lat);
this.getRestaurants(data.lat,data.lng);
});

关于reactjs - React 函数未定义 no-undef,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44486532/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com