如何从反应js中的函数返回数组
Posted
技术标签:
【中文标题】如何从反应js中的函数返回数组【英文标题】:How to return array from function in react js 【发布时间】:2020-04-03 07:55:42 【问题描述】:嗨,我是反应 js 的新手,我正在调用 getItem 函数并将响应推送到一个数组并返回该数组,但是在我返回之前我得到了一个空数组
private _LoadExpenses()
const items: IExpense[] = [];
this._expensesDataProvider.getItems().then((expenses: IExpense[]) =>
expenses.forEach(element =>
items.push(SGDDAppDate:element.SGDDAppDate,ExpenseCategory:element.ExpenseCategory,ExpenseType1:element.ExpenseType1);
);
return expenses;
);
//console.log(items)
return items;
【问题讨论】:
费用数组必须为空,这就是为什么 forEach 没有执行因此为空数组 _expensesDataProvider.getItems() 是异步的吗?如果是这样,您应该在那里有某种等待声明。另外我会使用组件的状态而不是直接返回数组。 【参考方案1】:Block this._expensesDataProvider 完成后你的 console.log(items) 必须为空。而且我认为 getItems() 是异步的,因此在数据到达并将项目推送到项目数组中之前,您可以控制台记录为空的项目。
你需要console.log(items)在返回费用之前;
如果您需要为以后的用户返回项目,您可以将您的代码包装在 Promise 中并返回一个 Promise ,然后每次需要您必须使用的项目。然后像这个例子 => https://codesandbox.io/s/kind-rhodes-w1twf
因为只要“this._expensesDataProvider”运行,“return items”就会运行,此时项目是空的。
【讨论】:
感谢您的回复。是的,我在退货费用之前得到,但在 then() 之后它是空的。我需要退货【参考方案2】:我的示例异步函数代码:
private async _getListData(): Promise<IReactItem[]>
return pnp.sp.web.lists.getByTitle("TestList").items.select("Id,Title,Description,User/ID,User/EMail").expand("User").get().then((response:IReactItem[]) =>
return response;
);
调用函数:
this._getListData().then(items=>
console.log(items);
);
为您的代码。
试试:
private _LoadExpenses(): Promise<IExpense[]>
return this._expensesDataProvider.getItems().then((expenses: IExpense[]) =>
return expenses;
);
【讨论】:
以上是关于如何从反应js中的函数返回数组的主要内容,如果未能解决你的问题,请参考以下文章