Tengo un componente con la siguiente estructura:
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} /> } Uso _renderSomething() en la función render() del Component . Sin embargo, esto me da:
Error: los objetos no son válidos como hijos de React (encontrado: objeto con claves {_U, _V, _W, _X}). Si tenía la intención de representar una colección de niños, use una matriz en su lugar.
Esta {_U, _V, _W, _X} me parece una promesa no resuelta. Cuando elimino la palabra clave async de renderSomething() , comento los const results = ... y paso algunos datos ficticios a <FlatList ... , se procesa sin problemas.
¿Por qué renderSomething() no devuelve <FlatList ... sino una promesa no resuelta?
Como señaló @Yousaf:
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} /> }Puede usar el gancho useEffect .
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} /> }