Javascript React本机自定义类未设置属性

我创建了一个名为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方法来重新设置用户名值…

db.transaction是一个

异步

调用，您可能在执行

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

---

希望这会有帮助

我想你可能正在失去“这个”的范围

你能试试下面的方法看看是否有效吗

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

---

您正在创建类UserInfo的新实例，此时存储在this username变量中的值是空字符串。如果要在调用getUserInfo函数后从数据库中获取值，则可以从函数中返回值，并在react组件中使用该值，如下所示：-

    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>

从函数中返回值后，可以在react组件中使用该值，如下所示：-

    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>

将此值存储在您的状态和组件中，您可以按如下方式使用它：-

    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>

{this.state.username}

您需要调用方法-

this.getUserInfo（）

而不是

this.getUserInfo

已尝试过bro，相同的结果…确定。请更正问题中的问题，这样您就不会从下一个人那里得到类似的答案。在调用

UserInfo.getUserInfo（）时，您得到的值是多少。然后（…）

？没有，它显示错误。我以前做过类似{UserInfo.username}的事情，但现在我用上面的代码来显示它的错误哦，你正在使用这个内部渲染方法！，您需要更多的更改，您需要首先调用函数，然后将结果存储在

状态中

，然后使用以下方法显示相同的结果：UserInfo.getUserInfo（）。然后（username=>{/*使用username*/this.setState（{username:username}）执行任何您想执行的操作）；如何检查用户名是否为空？你在代码中的什么地方使用它？我在另一个屏幕上调用它，比如UserInfo.username&它在那里什么也不显示，但是如果我手动设置这个。username=“User Name”它在另一个屏幕上显示用户名如果你想在react组件中显示值，那么你应该使用一个扩展react.component的类，并使用状态更新你的UI。UserInfo类初始化时，其用户名设置为空字符串。如果此时尝试使用用户名，则用户名将始终等于“”。如果您稍后尝试请求它，它将被正确更新。我认为你应该检查React组件如何工作以及如何使用它们的状态。我不希望它是一个componet类，我只希望它是一个基本类，然后你应该自己处理UI的更新。这意味着，当您实际拥有用户名的数据时，您需要用新值通知其他组件。仍然为空。您可以通过控制台检查getUserInfo的then函数中的用户名值和UserInfo类中的row.id值吗？这样您的问题就解决了吗？还是你还有什么问题？