导入 React Native 组件时未定义异步 JS 函数

Question

我想在一些 React Native 组件中创建一个带有一些实用功能的 JavaScript 文件 import。我创建了一个文件“PremiumStatus.js”，其中包含一些函数：

import * as InAppPurchase from 'react-native-iap';
import { AsyncStorage } from "react-native";

async function getPreviousPurchases() {
    let purchases;
    try {
        purchases = await InAppPurchase.getPurchaseHistory();
        console.log("previous purchases: ", purchases);
    } catch (e) {
        console.warn(e);
    }
    return purchases;
}

export function doSomething() {
    console.log("doing something");
}

export async function hasPurchasedPremium() {
    console.log("calling hasPurchasedPremium");
    return true; // TODO: remove this when done testing
}

然后我在这样的 React Native 组件中使用它：

import { hasPurchasedPremium, doSomething } from "../../helpers/PremiumStatus";

...
async componentDidMount() {
        doSomething();
        ...
        const hasPurchasedPremium = await hasPurchasedPremium();
        ...
}

当我运行它时，我得到以下调试输出：

05-04 20:40:33.540 29070 29819 I ReactNativeJS: doing something
05-04 20:40:33.789 29070 29819 W ReactNativeJS: Possible Unhandled Promise Rejection (id: 0):
05-04 20:40:33.789 29070 29819 W ReactNativeJS: TypeError: undefined is not a function (evaluating '_hasPurchasedPremium()')
05-04 20:40:33.789 29070 29819 W ReactNativeJS: componentDidMount$@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:69301:85
05-04 20:40:33.789 29070 29819 W ReactNativeJS: tryCatch@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:16727:23
05-04 20:40:33.789 29070 29819 W ReactNativeJS: invoke@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:16900:32
05-04 20:40:33.789 29070 29819 W ReactNativeJS: http://localhost:8081/index.delta?platform=android&dev=true&minify=false:16770:30
05-04 20:40:33.789 29070 29819 W ReactNativeJS: tryCatch@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:16727:23
05-04 20:40:33.789 29070 29819 W ReactNativeJS: invoke@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:16803:30
05-04 20:40:33.789 29070 29819 W ReactNativeJS: http://localhost:8081/index.delta?platform=android&dev=true&minify=false:16813:21
05-04 20:40:33.789 29070 29819 W ReactNativeJS: tryCallOne@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:16056:16
05-04 20:40:33.789 29070 29819 W ReactNativeJS: http://localhost:8081/index.delta?platform=android&dev=true&minify=false:16157:27
05-04 20:40:33.789 29070 29819 W ReactNativeJS: http://localhost:8081/index.delta?platform=android&dev=true&minify=false:2884:26
05-04 20:40:33.789 29070 29819 W ReactNativeJS: _callTimer@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:2773:17
05-04 20:40:33.789 29070 29819 W ReactNativeJS: _callImmediatesPass@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:2809:19
05-04 20:40:33.789 29070 29819 W ReactNativeJS: callImmediates@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:3028:33
05-04 20:40:33.789 29070 29819 W ReactNativeJS: __callImmediates@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:2362:32
05-04 20:40:33.789 29070 29819 W ReactNativeJS: http://localhost:8081/index.delta?platform=android&dev=true&minify=false:2189:34
05-04 20:40:33.789 29070 29819 W ReactNativeJS: __guardSafe@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:2346:13
05-04 20:40:33.789 29070 29819 W ReactNativeJS: flushedQueue@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:2188:21
05-04 20:40:33.789 29070 29819 W ReactNativeJS: flushedQueue@[native code]
05-04 20:40:33.789 29070 29819 W ReactNativeJS: invokeCallbackAndReturnFlushedQueue@http://localhost:8081/index.delta?platform=android&dev=true&minify=false:2181:33
05-04 20:40:33.789 29070 29819 W ReactNativeJS: invokeCallbackAndReturnFlushedQueue@[native code]

其中最有趣的一行是“TypeError: undefined is not a function (evalating '_hasPurchasedPremium()')”。

常规函数正常工作的情况下，为什么异步函数未定义？

Answer 1

好像和babel有关。我不确定在您的 react native 版本中如何设置 babel，但下面的解决方法应该可以：

async function hasPurchasedPremium() {
    console.log("calling hasPurchasedPremium");
    return true; // TODO: remove this when done testing
}

export { hasPurchasedPremium }

Answer 2

这非常奇怪，但是在我重命名异步函数后错误消失了。