表中调用函数时返回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>
 )
})