反應函數沒有定義沒有民主基金

Question

我試圖編譯我的應用程序時，遇到下列錯誤 - 「getRestaurants」沒有定義沒有民主基金

我在爲什麼getRestaurants沒有爲zipCodeToCoords定義的麻煩追蹤

我有一個輸入組件，需要提交一份郵政編碼和電話zipCodeToCoords，那麼我想打電話給getRestaurants

這裏是主要反應成分

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

Answer 1

找餐館是不是有些全局函數，它是在你的應用類中的方法，所以你需要調用它本身。解決這個最簡單的方法很可能是：

1. 更改您做回調箭頭功能
2. 呼叫this.getRestaurants在zipCodeToCoords
3. 綁定this在你的構造，即this.getRestaurants = this.getRestaurants.bind(this);

getRestaurants和 zipCodeToCoords

回調將變爲：

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

Answer 2

這似乎是一個範圍界定問題，因爲您正在傳遞zipCodeToCoords其範圍是從調用它的位置開始，而不是您想要的位置。要解決這個問題，你可以使用.bind，或者如果你正在編譯你的應用程序，你可以將它改爲一個箭頭函數。

zipCodeToCoords = (zip) => { 
     ... 
    } 

您還需要改變getRestaurants(data.lat,data.lng);從鏡調用它，this.getRestaurants(data.lat,data.lng);