将返回的 var 的值显示到渲染反应本机中

Question

我正在学习原生反应，我真的不明白为什么我不能在我的渲染视图中显示我返回的 var用户名

我尝试了几件事，但没有人工作

Read() {
var userId = firebase.auth().currentUser.uid;
return firebase.database().ref('/users/' + userId).once('value').then(function(snapshot) {
var username= snapshot.val() && snapshot.val().profile_picture
alert(username);
this.setState({username})
// How to display username into my return
});
}
render() {
const {username} = this.state
return (
<View style={styles.container}>
<Avatar style={styles.photo}
size="small"
rounded
source={{uri: "#"}}
onPress={() => this.Read()}
activeOpacity={0.7}
/>
<Text style={styles.paragraph}>
{username} //display nothing 
</Text>
<View >

我在 Read() 中放置了一个警报以检查我是否得到了我想要的值，以便我知道 var 用户名存储了我想显示在我的视图中的值。

控制台日志 ：日志屏幕

Answer 1

问题出在语法上，您没有正确更新状态。

语法错误：this.setState(用户名)

正确的语法：this.setState({

用户名})问题是这样的：

const username = snapshot.val() && snapshot.val().profile_picture;

尝试像这样更改此行代码：const username = snapshot.val()

如果显示用户名，请告诉我。

Answer 2

React 中的this.setState()采用一个描述要更新的状态键的对象。

我们可以使用速记{username}创建一个形式为{username: username}的对象，因此：

class Component {
Read() {
var userId = firebase.auth().currentUser.uid;
return firebase
.database()
.ref("/users/" + userId)
.once("value")
.then((snapshot) => {
var username = snapshot.val() && snapshot.val().profile_picture;
alert(username);
this.setState({username});  // <-- this has changed
});
}
render() {
const { username } = this.state;
return (
<View style={styles.container}>
<Avatar
style={styles.photo}
size="small"
rounded
source={{ uri: "#" }}
onPress={() => this.Read()}
activeOpacity={0.7}
/>
<Text style={styles.paragraph}>{username}</Text>
</View>
);
}
}

Answer 3

您尝试将引用组件的this对象使用到传统函数中，它不会绑定组件的上下文(收到像setState不是函数之类的错误)，因为setState在您的函数上下文中不可用，因此在Read函数中使用箭头函数，如下所示：

Read() {
var userId = firebase.auth().currentUser.uid;
return firebase
.database()
.ref("/users/" + userId)
.once("value")
.then((snapshot) => {
const username = snapshot.val() && snapshot.val().profile_picture;
this.setState({ username : username });
// You can use shorthanded syntax if you want 
// this.setState({ username });
});
}