我是React-Native和JS的新手,我对异步/承诺/等待的工作方式的理解确实很薄弱。我要实现的是一个异步函数(使用react-native-sqlite-storage),文件“ SQLData.js”中的“ runDemo”,将在“ Apps.js”中调用,然后将传递已加载的数据作为要在FlatList中呈现的道具。
Apps.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()来返回一个Promise,但除此之外,我不确定我应该在Apps.js中做什么!
我收到的错误是不变冲突:试图获取超出范围索引NaN的帧。我相信我收到此错误是因为我没有在Apps.js中正确调用runDemo(),并且它将作为道具的未定义对象返回到CustomList
答案 0 :(得分:1)
您可以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);
};