React Native 自定义类未设置属性

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())

但现在它返回空值但在控制台值显示，我错过了什么。我通过在构造函数末尾调用 getUserInfo 方法重新设置用户名值...

Answer 1

db.transaction 是一个asynchronous 调用，你可能会在this.username = row.id 语句执行之前调用UserInfo.username。而不是直接访问username，而是调用UserInfo.getUserInfo()并使用promise获取解析值，比如

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

希望这会有所帮助！

Answer 2

我认为您可能会失去“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 3

您正在创建您的 UserInfo 类的新实例，此时您的此用户名变量中存储的值是空字符串。如果您想在调用 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>