反應：使用Ajax調用第三方API（Behance）

Question

我正嘗試使用Behance API來獲取列表項目，這是基於在我的搜索欄中鍵入的關鍵字，但是..我在提交輸入後不斷收到此錯誤我的搜索欄：

BeSearchContainer.js:35 Uncaught TypeError: Cannot read property 'done' of undefined

我的onsubmit功能：

// triggered whenever the user submits the Search form 
    onSubmitQuery(e) { 
    e.preventDefault() 
    let component = this 
// my error is from this next line.. 
     queryBehance(this.state.query).done(data => { 
     component.setState({ 
     query: '', 
     hasSearched: !component.state.hasSearched, 
     projects: data, 
    }) 
    }) 
    } 

我的$就功能：

import $ from 'jquery' 

export function queryBehance(query) { 
var term = query.replace(/\s/, "+"); 
var url = "https://www.behance.net/v2/projects? 
client_id={client_id}&field=" + term; 

    return 
    $.ajax({ 
     url: url, 
     type: "get", 
     data: {projects: {}}, 
     dataType: "jsonp", 
    }).done((response) => { 
     console.log(response); 
     return response["projects"] 
    }).fail(() => { 
     console.log("Ajax request fails") 
    }) 
    }; 

我是否需要調整我的Ajax方法，還是我的onSubmitQuery函數的語法錯誤？請原諒我缺乏知識，因爲我是非常新的反應:)任何意見，將不勝感激！

Answer 1

如果您的代碼完全按照您粘貼的問題編寫，那麼您的queryBehance功能在return關鍵字之後遭遇automatic semicolon insertion。將$.ajax移動到與return相同的行：

import $ from 'jquery' 

export function queryBehance(query) { 
var term = query.replace(/\s/, "+"); 
var url = "https://www.behance.net/v2/projects? 
client_id={client_id}&field=" + term; 

    return $.ajax({ 
     url: url, 
     type: "get", 
     data: {projects: {}}, 
     dataType: "jsonp", 
    }).done((response) => { 
     console.log(response); 
     return response["projects"] 
    }).fail(() => { 
     console.log("Ajax request fails") 
    }) 
    };