表中調用函數時返回Promise：嘗試並返回一個Promise的函數調用

Question

let data = [223, 34, 456, 56, 67];

function getDataFromApi(paramfromTableCell){
let postData = {data : paramfromTableCell}
   let result = apiResponse(url, 'post', postData).catch((err => console.log(err)))
   return result;
}

data.map((value)=>{
 return(
       <th>{getDataFromApi(value)}</th>
 )
})

在表格單元格中呼叫一個函數，但它會傳回一個Promise。在呼叫函數時，它接受一個參數並根據數字返回名稱，但它會傳回Promise。有沒有辦法解決這個問題？

Answer 1

你必須await這個promise來取得結果。否則你只會得到這個promise。所以在你的map函數中加入async，然後使用await：

data.map(async (value)=>{
  return(<th>{await getDataFromApi(value)}</th>
)

Answer 2

看起來你正在使用React。你需要將你的回應儲存到React的狀態。

這是一個範例程式碼，它應該是這樣的（未經測試）：

let data = [223, 34, 456, 56, 67];
const [responses, setResponses]  = useState([]);

useEffect(() => {
   const getAllResponses = () => Promise.all(
       data.map(val =>  getDataFromApi(val))
   );

   getAllResponses().then(responses => setResponses(responses));
}, [data])

function getDataFromApi(paramfromTableCell){
    let postData = {data : paramfromTableCell}
    return apiResponse(url, 'post', postData).catch((err => console.log(err)))
}

responses.map((value)=>{
 return(
       <th>{value}</th>
 )
})