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

Posted 2023-02-23

【中文标题】在 React 组件中使用 async 函数、await 和 resolve

【英文标题】：Using async function, await and resolve in React component

【发布时间】：2021-11-28 23:33:17

【问题描述】：

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

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 ... 而是一个未解决的承诺？

【问题讨论】：

异步函数总是返回一个承诺。 1.用空数组的初始值创建一个状态。 2. 将该空数组传递给FlatList。 3. 获取数据，更新状态。 4. 组件将重新渲染，将填充的数组传递给FlatList 组件。

你尝试过 try catch 块吗？

【参考方案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 />

【讨论】：

这不会在每次渲染时调用 api/db 吗？

【参考方案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 />

【讨论】：

这是一种反模式。阅读dev.to/danialdezfouli/…

谢谢。我不知道。我是本地反应的菜鸟。