I have a component with the following structure:
const _dbCall = () => {
const fooDb = SQLite.openDatabase(db);
return new Promise(resolve => {
fooDb.transaction(tx => {
tx.executeSql(`SOME SQL`, [], (tx, results) => {
resolve(results.rows._array);
}, null);
});
})
}
async function _renderSomething() {
const results = await _dbCall();
return <FlatList
data={results}
renderItem={_renderFunc}
keyExtractor={item => item} />
}
I use _renderSomething() in the render() function of the Component.
However, this gives me:
Error: Objects are not valid as a React child (found: object with keys {_U, _V, _W, _X}). If you meant to render a collection of children, use an array instead.
This {_U, _V, _W, _X} looks like an unresolved promise to me.
When I remove the async keyword from renderSomething(), comment the const results = ... and pass some dummy data to <FlatList ..., it renders without a problem.
Why does renderSomething() not return the <FlatList ... but an unresolved promise?
As @Yousaf pointed out:
const [resultsFromDb, setResultsFromDb] = useState([]);
const _dbCall = () => {
const foo = [];
const fooDb = SQLite.openDatabase(db);
fooDb.transaction(tx => {
tx.executeSql(`SOME SQL`, [], (tx, results) => {
// do something the results
for (let i = 0; i < results.rows.length; i++) {
foo.push(results.rows.item(i));
}
setResultsFromDb(foo)
}, null);
});
}
const _renderSomething = () => {
const results = _dbCall();
return <FlatList
data={resultsFromDb}
renderItem={_renderFunc}
keyExtractor={item => item} />
}
You can use in useEffect hook.
function _renderSomething() {
const [data,setData] = React.useState([])
React.useEffect(()=>{
(async () => {
const results = await _dbCall();
setData(results);
})()
}, []);
return <FlatList
data={data}
renderItem={_renderFunc}
keyExtractor={item => item} />
}