反应：使用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") 
    }) 
    };