如何在反应中呈现异步函数的结果

Question

我有一个 React 功能组件，我想在其中显示异步函数返回的值。但是，我不能运行 const a = await getData(); 因为我只能在异步函数中使用 await 。我试过像这样包装代码：

(async () => {
    const a = await getData();
  })()

但是如果我这样做，然后在渲染中简单地包含 {a} 然后由于我的项目的设置，我得到 a 没有被定义。（如果我只是做 const a = 'string' 那么它就可以工作，但显然 a 不会有 getData 的结果）。我运行在使用 getData().then 时遇到了类似的问题。有谁知道我如何获得异步函数的结果然后实际渲染它？

Answer 1

使用来自 react 的 useEffect mate，它可以让您轻松地使用它，如下所示

import {useEffect,useState} from 'react'

export const TestComponent = props => {
   const [results, setResults] = useState([]);//it at all you're expecting array

   useEffect(() => {
      const dataApi = async () => {
         const a = await getData();
         setResults(a);
       }
      //dont forget to call the dataApi() function as below
      dataApi();
    },[])

   //then below is you're rendered jsx mate,
  return <div>{results.map(data => <span key = {data.id}>{data.name}</span>)}</div>

}

如何在反应中呈现异步函数的结果

how to render the result of an asynchronous function in react

reactjs

async-await

promise