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

Question

I am having a bit of struggle trying to understand how async functions work in React Native.

In this example I am invoking a sqllite db call via a async call and get values of height and standard and return both these values as an object called result .

Values exist in sqllite db as can be seen in the console output shown below.

The method invoked from componentDidMount lifecycle method is an async method.

As can be seen I am using await to wait for the actual execution ( aka getting data from sqllite ) to complete.

Line X always returns as undefined.

Line Y does not seem to execute at all as the state does not get changed from the initial values of 100 & "asasd" at all.

I have eyeballed the code and I am not sure what I am missing here.

Can someone take a look at it and let me know ?

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;

      }

Output from Device and Console

Answer 1

You seem to have the this.setState after a return statement; no code after the return statement will execute. Just put the this.setState call before the return block

Also, the function getProfileHeightStandardfromDB() needs to be an async function or needs to return a Promise . Currently the method does not return a Promise so theres no point awaiting it. So heres what you would need to do

function getProfileHeightStandardfromDB() {
  return new Promise((resolve, reject) => {
    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);

          // what you resolve here is what will be the result of
          // await getProfileHeightStandardfromDB(); 
          resolve({ profileheight, profilestandard });
      });
    }, null, null);
  });      
}

Answer 2

You need to return data from getProfileHeightStandardfromDB , db.transaction is also async function, so code outside the db.transaction , will execute first before your console logs.

You need to change getProfileHeightStandardfromDB function like this :

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

Also change the order of last two lines of 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
}