在 React 组件中使用 async 函数、await 和 resolve

Question

我有一个结构如下的组件：

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} />
}

我在Component 的render() 函数中使用_renderSomething()。 但是，这给了我：

错误：对象作为 React 子对象无效（找到：带有键 {_U、_V、_W、_X} 的对象）。如果您打算渲染一组子项，请改用数组。

这个{_U, _V, _W, _X} 对我来说似乎是一个未解决的承诺。 当我从renderSomething() 中删除async 关键字时，注释const results = ... 并将一些虚拟数据传递给<FlatList ...，它会毫无问题地呈现。

为什么renderSomething() 不返回<FlatList ... 而是一个未解决的承诺？

Answer 1

正如@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} />
}

Answer 2

你可以在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} />
}