javascript - 对异步和承诺的困惑。反应原生
问题描述
我是 React-Native 和 JS 的新手,我对 async/promise/await 如何工作的理解非常薄弱。我正在尝试实现的是一个异步函数(使用 react-native-sqlite-storage),文件“SQLData.js”中的“runDemo”,它将在“Apps.js”中调用,然后将传递加载的数据作为要在 FlatList 中呈现的道具。
应用程序.js
import React from 'react';
import CustomList from './components/FlatList';
import SQLData from './components/SQLData';
//This uses functional instead of class component
let data;
export default function App() {
async function fetchData() {
data = await SQLData.runDemo();
return data;
}
return(
<CustomList data={fetchData()}/>
);
};
SQLData.js
从 users.db 获取数据
export async function runDemo() {
try {
const db = await new Promise((resolve, reject) => {
const db = SQLite.openDatabase(
{ name: 'users.db', createFromLocation: 1 },
() => resolve(db),
reject
)
})
const results = await new Promise((resolve, reject) => {
db.transaction(tx => {
tx.executeSql(
'SELECT * FROM users',
[],
(tx, results) => resolve(results),
reject
)
})
})
const localArray = []
for (let i = 0; i < results.rows.length; i++) {
localArray.push(results.rows.item(i))
}
return localArray
} catch (e) {
console.log('SQL Error: ', e)
return false
}
}
我知道我正在创建一个异步函数 runDemo() 它将返回一个承诺,但除此之外我不确定我应该在 Apps.js 中做什么!
我收到的错误是 Invariant Violation: Tried to get frame for out of range index NaN。我相信我收到此错误是因为我没有在 Apps.js 中正确调用 runDemo() 并且它正在将未定义的对象作为道具返回到 CustomList
解决方案
您可以useEffect
挂钩以运行诸如获取数据之类的副作用。获取数据后,您可以将其添加到状态中。
import React, { useEffect, useState } from 'react';
export default function App() {
[someData, setSomeData] = useState();
useEffect(() => {
(async () => {
const data = await SQLData.runDemo();
setSomeData(data);
})()
}, [setSomeData]) // add any additional dependencies
return (someData ? <CustomList data={someData} /> : null);
};
推荐阅读
- python - 将列表转换为预期的元组列表而无需在 Python 中进行任何迭代?
- c++ - 从队列 C++ 中删除第一个元素
- tableau-api - 具有 6 个以上维度列的 Tableau 表
- wpf - 使用 Prism 绑定样式
- linkedin - Linkedin API - 实用地向 MDP 添加广告帐户
- mysql - MySQL中的变量未分配给NULL
- python-3.x - Discord.py 重写机器人不响应正常命令
- html - 如何使这个嵌入的视频 100% 宽?
- python - 如何解决在 Python 中合并 OpenCv 中的频道的问题?
- vb.net - 有没有更好的方法来检查文件是否比 X 旧?