Question

我在尝试理解async函数在React Native中的工作方式时遇到了一些困难。

在此示例中，我通过异步调用调用sqllite db调用并获取height和standard的值，并将这两个值作为名为result的对象返回。

sqllite db中存在值，如下面显示的控制台输出中所示。

从componentDidMount生命周期方法调用的方法是异步方法。

可以看出我使用await等待实际执行（ aka sqllite 中的数据）来完成。

第X行始终以未定义的形式返回。

线Y似乎根本没有执行，因为状态没有从100＆amp;的初始值改变。 “asasd”。

我已经看过代码，我不确定我在这里缺少什么。

有人可以看一下并让我知道吗？

App.js

import React, { Component } from 'react';
import { View, Text } from 'react-native';
import {
  dropLogsTable,
  createLogsTable,
  getProfileHeightStandardfromDB,
  getProfileHeightStandardPremade,
  saveLogsRecord
} from '../src/helper';

export default class App extends Component {
  state = {
    logarray: [],
    profileobject: {profileheight: 100, profilestandard: "asasd"},

  };


  componentDidMount() {

    dropLogsTable();
    createLogsTable();
    this.fetchProfileData();


  }

  async fetchProfileData() {
    console.log('Before Profile Fetch');
    const result = await getProfileHeightStandardfromDB();
    console.log('After Profile Fetch');
    console.log('Height : '+result.profileheight);
    console.log('Standard: '+result.profilestandard);
    return result; //Line X
    this.setState({profileobject:result}); //Line Y
  }

  render() {
    return (
      <View>
        <Text>This is a test</Text>
        <Text>Profile Height : {this.state.profileobject.profileheight} </Text>
        <Text>Profile Standard : {this.state.profileobject.profilestandard}</Text>
      </View>
    );
  }
}

helper.js

import { SQLite } from 'expo';

const db = SQLite.openDatabase({ name: 'swlt.db' });

let profileheight, profilestandard;

export function getProfileHeightStandardfromDB()
          {
        db.transaction(
          tx => {

            tx.executeSql('select standard, metricweight, metricheight, imperialheight, imperialweight, bmi, metricgoalweight, imperialgoalweight from profile', [], (_, { rows }) =>
              {
                //console.log(rows);
                console.log(rows);

                //console.log(parseFloat(rows._array[0].metricheight));
                profileheight = parseFloat(rows._array[0].metricheight);
                profilestandard = rows._array[0].standard;
                console.log('Profileheight ===>'+profileheight);
                console.log('Profilestandard ===>'+profilestandard);
              }
            );
          },
          null,
          null
        );

        const profileobject = {profileheight, profilestandard};
        console.log(profileobject);
        return profileobject;

      }

设备和控制台的输出

Answer 1

您在Mars$Count <- with(Mars, as.vector(table(ticket)[ticket])) Mars$Count #[1] 2 2 1 1 2 2声明之后似乎有this.setState; return语句执行后没有代码。只需在返回块之前调用return

此外，函数this.setState必须是getProfileHeightStandardfromDB()函数或需要返回async。目前该方法不会返回Promise，因此没有必要等待它。所以你需要做什么

Promise

Answer 2

您需要从getProfileHeightStandardfromDB返回数据，db.transaction也是async函数，因此db.transaction之外的代码将在您的控制台记录之前首先执行。

您需要像这样更改getProfileHeightStandardfromDB功能：

export function getProfileHeightStandardfromDB() {
    return db.transaction(
        tx => {

            tx.executeSql('select standard, metricweight, metricheight, imperialheight, imperialweight, bmi, metricgoalweight, imperialgoalweight from profile', [], (_, {
                rows
            }) => {
                //console.log(rows);
                console.log(rows);

                //console.log(parseFloat(rows._array[0].metricheight));
                profileheight = parseFloat(rows._array[0].metricheight);
                profilestandard = rows._array[0].standard;
                console.log('Profileheight ===>' + profileheight);
                console.log('Profilestandard ===>' + profilestandard);
                const profileobject = {
                    profileheight,
                    profilestandard
                };
                console.log(profileobject);
                return profileobject;
            });
        },
        null,
        null
    );
}

同时更改fetchProfileData的最后两行的顺序：

async fetchProfileData() {
    console.log('Before Profile Fetch');
    const result = await getProfileHeightStandardfromDB();
    console.log('After Profile Fetch');
    console.log('Height : '+result.profileheight);
    console.log('Standard: '+result.profilestandard);
    this.setState({profileobject:result}); //Line Y
    return result; //Line X
}

React Native：处理对sqllite db的异步调用

2 个答案: