在React组件中,当调用一个返回Promise的API时,可以使用async/await来处理Promise并等待数据的返回。例如:
import React, { useState, useEffect } from 'react'; import { fetchData } from './api';
function MyComponent() { const [data, setData] = useState(null);
useEffect(() => { async function fetchDataAsync() { const response = await fetchData(); setData(response.data); } fetchDataAsync(); }, []);
// Render data once it has been fetched return (
{data}
在上面的例子中,fetchData()是一个异步函数,返回一个Promise。在useEffect内部,我们定义了一个名为fetchDataAsync的异步函数来处理Promise并等待数据的返回。一旦数据被返回,我们使用useState hook来更新组件的状态以重新渲染数据。最后,我们返回一个包含数据的简单React元素。