如何让一个函数等待另一个函数

Question

我有这个函数：

const submitImport = async (value) => {
const { actions, navigation, account } = this.props;
this.setState({ isImporting: true });
actions.importWallet(value.mnemonicPhrase, value.password, 1);
console.log('acc', account);
actions.showNotification({
message: 'Account has been successfully Imported',
isError: false,
});
};

importWallet正在向account对象添加新属性，但当我第一次调用此函数时，account对象为空，但当第二次单击它时，它是可以的。所以我猜测importWallet需要时间来完成并返回值。我尝试使用asyncawait，但没有成功。此外，我尝试使用return new Promise，但它仍然不起作用。也许我做错了。

关于如何解决这个问题，有什么建议吗？

Answer 1

我假设importWallet函数会导致account道具发生一些变化。

所有道具更改都需要至少一个渲染周期，更新后的值才能可见，因为state/prop更改在react中是异步的。在您的情况下，您试图在调用actions.importWallet后立即访问account。因此，由于它位于同一渲染中，因此尚未更新。但正如您所提到的，它将在后续渲染中可用。

此外，由于react状态更新的异步性质没有公开，因此不能使其与async wait/promise同步。

你的用例可以通过一些折射器来实现：

1. 尝试在account.importWallet的返回语句中获取account的新值。这样你甚至可以在道具更新之前使用它。

   const updatedAccount=actions.importWallet(value.mnemonicPhrase，value.password，1(；

2. 如果使用React Hooks，可以使用useEffect创建效果，并添加account作为依赖项。这将在依赖项值更改时调用效果(依赖项应该是一致效果调用的基元数据类型(。