ReactJS - 推送到承諾外的列表

我想更新在承諾（API調用）之外定義的列表。ReactJS - 推送到承諾外的列表

這裏是代碼：

let data = []; 
    api.getData(this.state.ID).then((resp) => { 
    data = [...data, { title : resp.title }]; 
    data = [...data, { name : resp.name }]; 
    }); 
    console.log(data); // --> it returns []

的數據是[]和沒有價值已經推到它。我怎樣才能改變我的代碼來解決這個問題？由於某些原因，我不想使用setState()

此致。

來源

2017-09-28 Adel

如果這正是爲了在其編寫的代碼，它會返回[]因爲api.getData是異步的。 – semuzaboi

最終，你想呈現這些數據，對嗎？留意別人的建議以解決手頭的問題，但根據你的寫作方式，如果沒有'this.setState'就無法完成。我假設你沒有使用REDX。 – Andrew

可能的重複[如何從異步調用返回響應？]（https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call） –

承諾是總是異步，這意味着您的數據數組在您定義承諾後仍然是空的。

要訪問已填充的數據數組，您必須在promise中引用它。

let data = []; 

api.getData(this.state.ID).then((resp) => { 
    data = [...data, { title: resp.title }, { name: resp.name }]; 

    console.log(data); 
});

來源

2017-09-28 09:57:35 euvl

您的console.log函數在api返回數據之前正在執行。儘管數據在api調用後得到更新。你看不到它，因爲它在這之前就被安慰了。

let data = []; 
    api.getData(this.state.ID).then((resp) => { 
    data = [...data, { title : resp.title }]; 
    data = [...data, { name : resp.name }]; 
    Console.log(data) 
})

現在您可以看到數據控制檯。

但是如果你想在控制方法之後控制數據，那麼你可以使用npm模塊q來同步執行api。

來源

2017-09-28 09:57:48

異步/等待將幫助您：

let data = []; 
async function getData() { 
    await api.getData(this.state.ID).then((resp) => { 
    data = [...data, { title : resp.title }]; 
    data = [...data, { name : resp.name }]; 
    }); 
    console.log(data); // --> it shouldn't return empty array 
} 
getData();

例子：

function resolveAfter2Seconds(x) { 
 
     return new Promise(resolve => { 
 
     setTimeout(() => { 
 
      resolve("You see it after promis end"); 
 
     }, 2000); 
 
     }); 
 
    } 
 
    
 
    
 
    var arr = []; 
 
    async function f1() { 
 
     await resolveAfter2Seconds(10).then(res => arr.push(res)); 
 
     alert(arr); 
 
    } 
 
    f1();

來源

2017-09-28 10:00:09 Andrew

ReactJS - 推送到承諾外的列表

回答

相關問題