对 async 和 promise 的混淆。反应本机

Question

我是 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()，它将 return 一个承诺，但除此之外我不确定我应该在 Apps.js 中做什么！

我收到的错误是不变违规：尝试获取超出范围索引 NaN 的帧。我相信我收到此错误是因为我没有在 Apps.js 中正确调用 runDemo() 并且它正在 return 将未定义的对象作为道具放入 CustomList

Answer 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);
};

对 async 和 promise 的混淆。反应本机

Confusion on async and promise. React Native

javascript

reactjs

react-native

react-native-sqlite-storage