即使使用“等待”，React Native 异步函数也会返回承诺

Question

我的 react-native 组件应该返回一些由 API 调用返回的 svg。我正在使用带有 await 的异步函数，但我的函数仍然返回一个承诺，就好像该承诺尚未解决一样。 我知道这个问题已经被问过很多次了，但我仍然不确定为什么我的 return 语句没有返回已解决的承诺，因为我正在使用“await”。

return 语句不应该返回已解决的承诺而不是承诺本身吗？我应该注意我不想控制台记录该值，而是直接返回它。

const getQRCode = async () => {
  try {
       const response = await qrFetch;
       const responseText = await response.text();
      // console.log(responseText)
       return responseText;
   } catch(error){
        console.error(error);
      }
}

const xml = getQRCode()

console.log("--XML DATA HERE--")
console.log(xml)

export default function QRCodeScreen({ navigation }) {
  return (
    <SafeAreaView style={styles.safeAreaContainer}>
      <SvgXml xml={xml} width="100%" height="100%" />;
    </SafeAreaView>
  );
}

更新

我的更新代码现在包含在异步函数中，但出现如下新错误。

async function main(){
  const getQRCode = async () => {
    try {
         const response = await qrFetch;
         const responseText = await response.text();
         return responseText;
     } catch(error){
          console.error(error);
        }
  }
  const xml = await getQRCode()
  return xml
}

export default function QRCodeScreen({ navigation }) {
  return (
    <SafeAreaView style={styles.safeAreaContainer}>
      <SvgXml xml={main()} width="100%" height="100%" />
    </SafeAreaView>
  );
}

错误

TypeError: source.split is not a function. (In 'source.split('\n')', 'source.split' is undefined)

这可能与我正在使用的 react-native-svg 包有关。我检查了 typeOf 'xml' 变量，它确实是一个字符串。我可能会问一个单独的问题或在包 github repo 上报告该问题。

Answer 1

async function 将返回 promise。

如果你想得到这个promise的内容，你必须await结果：

const xml = await getQRCode()

错误

  export default function QRCodeScreen({ navigation }) {
    const [xml, setXml] = useState(null)
    
    async function main() {
      ...your function
      // remove return
      // replace by:
      const tempXml = await getQRCode()

      setXml(tempXml)
    }
    
    useEffect(() => {
      main()
    }, [])

  return (
    <SafeAreaView style={styles.safeAreaContainer}>
      <SvgXml xml={xml} width="100%" height="100%" />
    </SafeAreaView>
  );

}

Answer 2

试试这个：

const getQRCode = async () => {
  try {
       const response = await qrFetch;
       const responseText = await response.text();
      // console.log(responseText)
       return responseText;
   } catch(error){
        console.error(error);
      }
}

const xml = await getQRCode()

console.log("--XML DATA HERE--")
console.log(xml)

export default function QRCodeScreen({ navigation }) {
  return (
    <SafeAreaView style={styles.safeAreaContainer}>
      <SvgXml xml={xml} width="100%" height="100%" />
    </SafeAreaView>
  );
}

顺便说一句：
你最好设置；在行尾everywhere 或nowhere 更一致。 我已经删除了 后面的;