在 React 的 useEffect 中返回值而不是 promise

Question

我有以下代碼，

let currencyValues = [];

const retrieveCurrencyPairs = async (pair) => {
    const r = await fetch(pair.url);
    const rParsed = await r.json();
    let newCurrencyValue = { currency: pair.countries, value: rParsed };
    return newCurrencyValue;
};

useEffect(() => {
    currencyValues = currencyPairs.map(retrieveCurrencyPairs);
    console.log(currencyValues);
}, []);

以及以下期望：

• 在頁面加載時， useEffect觸發 map() 內部的 function
• 對於數組的每個值，都會觸發retrieveCurrencyPairs()並等待結果，然后返回結果
• currencyValues數組填充了 3 個新對象

不幸的是 function 返回的是承諾，而不是對象。

關於如何返回對象的任何提示？

Answer 1

異步函數總是返回承諾。 你可以這樣做：

Promise.all(currencyPairs.map(retrieveCurrencyPairs))
  .then( results => ... )

Promise.all具有並行運行它們而不是順序運行它們的額外好處。

如果您想處理個別失敗/拒絕而不拒絕整個列表，您可以考慮Promise.allSettled 。

Answer 2

我認為你應該使用Promise.all來正確處理多個承諾

useEffect(() => {
    (async()=>{
        const results = await Promise.all(currencyPairs.map(retrieveCurrencyPairs))
        console.log(results );
    })()
}, []);

要么

useEffect(() => {
   const results = Promise.all(currencyPairs.map(retrieveCurrencyPairs)).then(results => console.log(results));     
}, []);

要了解有關Promise.all更多信息或要了解有關Promise.allSettled更多信息，請使用 MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled

Answer 3

試試這個

  useEffect(() => {
    (async()=>{
        currencyValues = await currencyPairs.map(retrieveCurrencyPairs);
        console.log(currencyValues);
    })()
    }, []);

Answer 4

異步函數總是隱式地返回承諾。 您需要要么等待.then currency.Pairs.map(retrieveCurrencyPairs)要么。然后它

由於Promise.all答案已經發布並且是堅持使用一種方法的好習慣，這里是await的替代方法

useEffect(() => {
    const getCurrencyValues = async ()=>{
    const currencyValues = await currencyPairs.map(retrieveCurrencyPairs);
    return currencyValues
    }
    console.log(getCurrencyValues());

}, []);