对异步和承诺的困惑。反应原生

Posted 2023-03-10

【中文标题】对异步和承诺的困惑。反应原生

【英文标题】：Confusion on async and promise. React Native

【发布时间】：2020-10-21 02:01:33

【问题描述】：

我是 React-Native 和 JS 的新手，我对 async/promise/await 如何工作的理解非常薄弱。我正在尝试实现的是一个异步函数（使用 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()，它将返回一个承诺，但除此之外，我不确定我应该在 Apps.js 中做什么！

我收到的错误是 Invariant Violation: Tried to get frame for out of range index NaN。我相信我收到此错误是因为我没有在 Apps.js 中正确调用 runDemo() 并且它正在将未定义的对象作为道具返回到 CustomList

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

【讨论】：

我明白了！我想知道为什么我还需要返回 (someData && ) ？为什么不只是

因为我们只想在拥有数据时（填充 someData 时）渲染<CustomList />。

明白了！所以基本上没有它，我们仍然会变得不确定。但是，我现在收到一条错误消息，提示 App(..) 没有从渲染中返回任何内容。

错误消失了，但现在我有一个“TypeError：无法读取未定义的属性'runDemo'。”我还尝试在 const data= ... 之后包含一个 console.log(data) 以查看承诺/数据，但它没有被记录！

确保import SQLData from './components/SQLData';具有该功能。