javascript - 即使使用“等待”,React Native 异步函数也会返回承诺
问题描述
我的 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 上报告这个问题。
解决方案
Anasync 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>
);
}
推荐阅读
- python - 如何将常量值与 Python 中文本文件的每一行相乘?
- angular - 在Angular 2中正确等待来自Store的嵌套Observables
- node.js - 防止多次调用以刷新快速中间件中的会话
- flutter - 如何在 Flutter 中获取 Camera Intrinsic 参数
- matlab - Matlab - 将行添加到表中,其中第一列中的值确定行位置
- python - Python 追加函数和列表
- algorithm - “流压缩算法”有官方名称吗?
- microsoft-teams - 有没有办法从 Microsoft Teams 获取消息的已读回执信息?
- python - 使用 Openpyxl 编写时将数据转换为日期类型
- reactjs - Luxon 只为 Safari 14 浏览器创建未来而不是过去的日期