在反应中使用异步函数获取数据[重复]答案

【问题标题】：Fetching data using a async function in react [duplicate]在反应中使用异步函数获取数据[重复]
【发布时间】：2022-01-18 13:00:10
【问题描述】：

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

我的代码：

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


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

当我尝试在外部控制台 apiData 时，它返回 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}

我想遍历所有模型并创建一个表：

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

【问题讨论】：

您需要将数据设置为某种状态，例如如果您有const [ campaigns, setCampaigns ] = useState([])，那么您将使用listingCampaignsModels().then(setCampaigns)

标签： javascript reactjs async-await

【解决方案1】：

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

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

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


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

【讨论】：