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

Question

我想创建一个包含一些实用函数的 JavaScript 文件，以导入到一些 React Native 组件中。我创建了一个文件“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 (evaluating '_hasPurchasedPremium()')”。

当常规函数工作正常时，为什么异步函数未定义？

Answer 1

它似乎与babel有关。我不确定 babel 在你的 React Native 版本中是如何设置的，但是下面的解决方法应该有效:

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

export { hasPurchasedPremium }