javascript - 在主函数中使用 React Native Await/Async

Question

所以我正在使用异步函数并等待从异步存储缓存中检索数据，并且取决于它是否在缓存中，我想根据它是否在缓存中来更改屏幕上的文本。然而，我遇到的问题是 ReactNative 不允许我声明我的主函数使用异步，这导致我过早地从 checkCache() 获取数据。缓存已经为键“test_code”存储了来自不同屏幕的数据。

如何使 CodeTest() 成为异步函数，以便在 checkCache() 前面使用 await 方法，以便显示正确的文本？

import React, { Component } from "react";
import {
  StyleSheet,
  Text,
  View,
  Image,
  SafeAreaView,
  TouchableOpacity,
} from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";

async function checkCache() {
  var isCodeCached = false;
  try {
    result = await AsyncStorage.getItem('test_code');
    if (result != null) {
      console.log("result is valid");
      console.log(result);
      isCodeCached = true;
    } else {
      console.log("result is not valid");
    }
  } catch (e) {
    console.log("Retrieval failed!");
  }

  return isCodeCached;
}

function CodeTest() { 
  const displayImage = () => {
    var x = 1;
    var isCodeCached = checkCache();
    if (isCodeCached === true) {
      return (
        <SafeAreaView>
          <Text style={styles.text}> Hello world</Text>
        </SafeAreaView>
      );
    } else {
      return (
        <SafeAreaView>
          <Text style={styles.text}> Hello universe</Text>
        </SafeAreaView>
      );
    }
  };

  return CodeTest();
}

export default CodeTest;

标签： javascriptreact-nativeasynchronousasync-await