Question

我有一个要求，我需要通过对服务器的ajax调用加载数据，然后将数据传递给reducer以通过props渲染我的页面。

但是我看到ajax调用中的数据显示为未定义。

function getInitData(url) {
    axios({url: url, timeout: 20000, method: 'get', responseType: 'json'})
    .then(function(response) {
        console.log(response.data.results)//--DATA DISPLAYED
        return response.data.results
    })
    .catch(function(response) {
        console.error(response.data);
    })
}

let formActions = {
    loadInitJSONSchema: function(formSchema) {
        let dataLoaded = getInitData('/startInterview')
        console.log(dataLoaded);//--DATA DISPLAYED as UNDEFINED
        return {type: 'LOAD_INIT_JSON_SCHEMA', formSchema: dataLoaded}
    }

}

我不知道为什么我的数据在我的实际方法中显示为未定义可能是因为异步调用？如果是这样，我如何在操作中加载我的数据？

请在URL

找到完整的代码

Answer 1

它的承诺一路下来。

一个jQuery示例：jQuery('body') 不返回body元素。它返回一个jQuery集合。 jQuery('body').css('background', 'red');也返回一个jQuery集合。它的收藏品一路下来。

axios.get().then(function(response) { return response; }) 不返回回复。它会返回一个承诺。

首先，改变这一点，以返回承诺：

function getInitData(url) {
    return axios...

然后改变你的功能：

loadInitJSONSchema: function(formSchema) {
    return getInitData('/startInterview').then(function(data) {
        return {type: 'LOAD_INIT_JSON_SCHEMA', formSchema: data}
    })

然后，使用loadInitJSONSchema的任何人都会获得承诺并获得.then()中的值。

loadInitJSONSchema(schema).then(function(result) { ... do something with result })

它的承诺一路下来。

此流程异步。使用var something = axios.get().then(function(response) { return response; })代码进行评估，程序继续运行。 .then()回调在当前函数执行完毕后很久就会发生。

ReactJS操作不通过ajax调用加载数据

1 个答案: