我创建了一个名为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方法来设置用户名值...
db.transaction
是一个asynchronous
调用,你可能会在执行UserInfo.username
声明之前调用this.username = row.id
。而不是直接访问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的新实例,并且在此时,存储在此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())
从函数返回值后,您可以在react组件中使用此值,如下所示: -
UserInfo.getUserInfo().then(username => {
this.setState({username})
});
将此值存储在您的状态和组件内部,您可以按如下方式使用它: -
<Text>{this.state.username}</Text>