Реагируйте на собственный класс, не задавая свойства

Question

Я создаю класс имени UserInfo, в котором я храню информацию о пользователях в переменных и вызываю эти переменные на разных экранах

    class UserInfo {
    constructor(props) {
        this.username = "Test"
    }
}

export default (new UserInfo())

И я вызываю его на других экранах, подобных этому UserInfo.username и работает нормально

Но теперь я хочу получить информацию о пользователе из локальной базы данных, поэтому я создал метод в классе UserInfo, который извлекает данные из локальной базы данных

    class UserInfo {
    constructor(props) {
        this.username = ""
        this.getUserInfo
    }

    getUserInfo = () =>{
        db.transaction((tx) => {
            tx.executeSql('SELECT * FROM users', [], (tx, results) => {
                let row = results.rows.item(0);
                console.log("UserID: " + row.id) // return value from db, working
                this.username = row.id
            });
        });
    }

}

export default (new UserInfo())

Но теперьего возвращаемое пустое значение, но в консольном значении есть show, я что-то упустил.Я устанавливаю значение имени пользователя, вызывая метод getUserInfo в конце конструктора ...

Answer 1

Я думаю, что вы можете потерять область действия "this"

Можете ли вы попробовать следующее и посмотреть, работает ли оно?

class UserInfo {
  constructor(props) {
    this.username = ""
    this.getUserInfo()
  }

  getUserInfo = () => {
    let ref = this; // save a reference to to this
    db.transaction((tx) => {
      tx.executeSql('SELECT * FROM users', [], (tx, results) => {
        let row = results.rows.item(0);
        console.log("UserID: " + row.id) // return value from db, working
        ref.username = row.id // save the username using the reference
      });
    });
  }

}

export default (new UserInfo())

Answer 2

Вы создаете новый экземпляр вашего класса UserInfo, и в этот момент значение , хранящееся внутри вашей переменной username, представляет собой пустую строку .Если вы хотите получить значение из базы данных после вызова функции getUserInfo, вы можете вернуть значение из вашей функции и использовать это значение внутри вашего реагирующего компонента, как показано ниже: -

    class UserInfo {
    constructor(props) {
        this.username = ""
        this.getUserInfo
    }

    getUserInfo = () =>{
        return new Promise((resolve, reject) => { 
           db.transaction((tx) => {
             tx.executeSql('SELECT * FROM users', [], (tx, results) => {
                let row = results.rows.item(0);
                console.log("UserID: " + row.id) // return value from db, working
                // this.username = row.id
                resolve(row.id);
            });
           });
        })
    }
 }

export default (new UserInfo())

После возврата значения изВ вашей функции вы можете использовать это значение внутри вашего реагирующего компонента, как показано ниже: -

UserInfo.getUserInfo().then(username => {
     this.setState({username})
});

сохранить это значение внутри вашего состояния, а внутри вашего компонента вы можете использовать его, как показано ниже: -

<Text>{this.state.username}</Text>

Answer 3

db.transaction - это вызов asynchronous, может случиться так, что вы звоните UserInfo.username до выполнения оператора this.username = row.id. Вместо прямого доступа к username, вызовите UserInfo.getUserInfo() и получите разрешенное значение, используя обещание, например

UserInfo.getUserInfo().then(username => {
    /* do whatever you want to do with username */
});

Изменения, которые вам нужно сделать в getUserInfo, следующие:

getUserInfo = () => {
  return new Promise((resove, reject) => {
     db.transaction((tx) => {
        tx.executeSql('SELECT * FROM users', [], (tx, results) => {
            let row = results.rows.item(0);
            console.log("UserID: " + row.id) // return value from db, working
            this.username = row.id;

            resolve(this.username);

        }, (ts, err) => { 
            /* handle the failed case here */
            reject();
        });
    });
  }); 
}

Надеюсь, это поможет!