ES6上的Ajax調用;獲取未定義錯誤

我對ReactJS相當陌生，並且已經學習了不到2個月，我試圖重新創建一個在線看到的項目，並將其更新到ES6 https://github.com/perborgen/YourSecondReactProject/blob/master/finished_project.html。ES6上的Ajax調用;獲取未定義錯誤

問題是，我從來沒有嘗試過之前做過任何調用，比如Ajax，抓取等。所以當我開始這個時，我得到一個錯誤，我的ajax是未定義的，我很漂亮我確信我的語法或格式可能有誤，請幫助我解釋我的錯誤以及解決方法。非常感謝！

P.S.我沒有iTunes帳戶，所以我使用了Tmdb API。

這裏就是我試圖做

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom'; 

class App extends Component { 
    state = {searchResults:[]}; 
    showResults(response){ 
    this.setState({searchResults: response.results}) 
} 

search(URL){ 
    ajax({ 
     type: "GET", 
     dataType: 'jsonp', 
     url: URL, 
     success: function(response){ 
      this.showResults(response); 
     }.bind(this) 
    }); 
} 

render(){ 
    return(
     <div> 
      <SearchBox search={this.search}/> 
      <Results searchResults={this.state.searchResults}/> 
     </div> 
     ); 
    } 
} 

class SearchBox extends Component{ 
    render(){ 
     return(
      <div> 
      <input type="text" ref="query" placeholder="Search Movies 
      Here"/> 
     <input type="submit" onClick={this.makeAjax}/> 
     </div> 
    ); 
} 

makeAjax(){ 
    var query = ReactDOM.findDOMNode(this.refs.query).value; 
    var URL = 'https://api.themoviedb.org/3/search/movie? 
       api_key=0xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx&language=en- 
       US&query='+query+'&page=1&include_adult=false'; 
    this.props.search(URL) 
    } 
} 

class Results extends Component{ 

    render(){ 
     var resultItems = this.props.searchResults.map((result) => { 
      return(
       <ResultItem key = {result.id} title={result.title}/>) 
     }); 
     return(
      <ul> 
       {resultItems} 
      </ul> 
     ); 
    } 
} 

class ResultItem extends Component{ 

    render(){ 
     return <li>{this.props.trackName}</li>; 
    } 
}

來源

2017-08-03 Alex T

我建議從這裏開始：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest –

爲了使用AJAX功能，你需要安裝jquery。您可以運行

npm install -S jquery

安裝它。之後，你需要將它導入到你的組件一樣

import $ from 'jquery';

，然後修改你的Ajax調用，比如

search = (URL) => { 
    $.ajax({ 
     type: "GET", 
     dataType: 'jsonp', 
     url: URL, 
     success: function(response){ 
      this.showResults(response); 
     }.bind(this); 
    }); 
}

但是它能夠更好地作出這樣axios或node-fetch使用其他庫，對於專門寫使用API調用而不是使用Jquery，因爲除了AJAX調用外，它還帶有許多你不需要的功能。

愛可信GET請求的例子從文檔回升是

// Make a request for a user with a given ID 
axios.get('/user?ID=12345') 
    .then(function (response) { 
    console.log(response); 
    }) 
    .catch(function (error) { 
    console.log(error); 
    });

來源

2017-08-03 19:30:01

我還會補充說，在ES6和React中還有其他一些方法，最重要的是Fetch（如果你想在本地執行）或Get。你也可以使用像Axios這樣的庫。這就是說，你在技術上是正確的，如果你想特別使用$ .ajax，你將不得不使用jQuery。 – yoursweater

@yoursweater，是的，還有其他類似node-fetch和axios的庫，也可以用來代替jquery，這顯然是更好的方法，因爲jquery帶有許多額外的功能，這是不需要的 –

謝謝@ShubhamKhatri我會看看Axios。 –

ES6上的Ajax調用;獲取未定義錯誤

回答

相關問題