在反应中使用异步函数获取数据

Question

我一直在尝试从对象数组创建 table。我能够控制异步函数中的数据。但我无法在外面安慰它。

我的代码：

useEffect(() => {
  listingCampaignsModels()
}, []);


async function listingCampaignsModels() {
    const apiData = await DataStore.query(Campaign);
    console.log(apiData);
    console.log(typeof(apiData));
    return apiData;
  };

当我试图在外面安慰 apiData 时，它 returns apiData is not defined 错误。

数据如下所示：

[Model, Model, Model, Model, Model, Model]

每个 Model 看起来像：

-> 1: Model {id: 'c40d6b22-840f-467a-909c-7b2b19960ffb', campaignOwner: 'eumagnas', campaignName: "mollitlab", startDate: "2022/08/15", endDate: "2022/10/25", expectedRevenue: 25, budgetedCost: 27, actualCost: 28}

我想遍历所有模型并创建一个 table 作为 :

Campaign Owner	Campaign Name	Start Date	End Date	Expected Revenue	Budgeted Cost	Actual Cost
eumagnas	mollitlab	2022/08/15	2022/10/25	25	27	28

Answer 1

您需要使用 useState() 挂钩将数据保存为活动状态。

const [campaigns, setCampaigns] = useState([]);

useEffect(() => {
  listingCampaignsModels()
}, []);


async function listingCampaignsModels() {
    const apiData = await DataStore.query(Campaign);
    console.log(apiData);
    setCampaigns(apiData);
  };

在反应中使用异步函数获取数据

Fetching data using a async function in react

javascript

async-await

reactjs