在这个项目中,我想使用从userType
数据库中检索到的数据来设置firebase
的状态。从firebase
进行的提取工作正常,但是我无法从那里设置userType
的状态
我已经尝试过了
this.setState=({userType:snapshot.val()})
this.state=({userType:snapshot.val()})
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput, Image } from 'react-native';
import * as firebase from 'firebase';
export default class Home extends React.Component {
constructor(props){
super(props)
this.state=({
userId:firebase.auth().currentUser.uid,
userType:'f'
})
}
componentDidMount() {
this.readUserData();
};
readUserData=()=> {
userstype= 'users/'+ this.state.userId + '/userType'
firebase.database().ref(userstype).on('value', function (snapshot) {
this.setState=({userType:snapshot.val()})
});
alert(this.state.userType)
}
render() {
return (
<View style={styles.container}>
<Text style={styles.titleText}>Taams</Text>
<Text style={styles.edition}>Developer's Edition</Text>
<Text style={styles.titleText}>Home</Text>
<Text>Alpha 0.0.0.1</Text>
</View>
)}}
答案 0 :(得分:0)
我已经更新了setState方法
尝试下面的代码
import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TextInput, Image } from 'react-native';
import * as firebase from 'firebase';
export default class Home extends React.Component {
constructor(props){
super(props)
this.state=({
userId:firebase.auth().currentUser.uid,
userType:'f'
})
}
componentDidMount() {
this.readUserData();
};
readUserData=()=> {
userstype= 'users/'+ this.state.userId + '/userType'
firebase.database().ref(userstype).on('value', function (snapshot) {
this.setState({userType:snapshot.val}, () => {
alert(this.state.userType)
})
});
}
render() {
return (
<View style={styles.container}>
<Text style={styles.titleText}>Taams</Text>
<Text style={styles.edition}>Developer's Edition</Text>
<Text style={styles.titleText}>Home</Text>
<Text>Alpha 0.0.0.1</Text>
</View>
)}}
希望这对您有用! 谢谢
答案 1 :(得分:0)
您的state
正在更新,但是您在错误的时间调用alert
,因此它使用的是state
的先前值。
状态是异步的,这意味着需要花费一些时间进行设置。因此,在您现有的代码中,在您致电alert
如果使用回调函数,则可以在状态发生更改后看到状态更改。
firebase.database().ref(userstype).on('value', (snapshot) => {
this.setState=({userType:snapshot.val()}, () => {
alert(this.state.userType)
})
});
我建议您阅读Michael Chan的这些精彩文章,向您展示如何正确使用state
https://medium.learnreact.com/setstate-is-asynchronous-52ead919a3f0
https://medium.learnreact.com/setstate-takes-a-callback-1f71ad5d2296
https://medium.learnreact.com/setstate-takes-a-function-56eb940f84b6
您可以检查一下componentDidUpdate
https://reactjs.org/docs/react-component.html#componentdidupdate
componentDidUpdate(prevProps, prevState) {
console.warn('prevState: ', prevState.userType, 'newState: ', this.state.userType)
}
每当状态更改时,它应该显示一个console.warn
,它应该允许您查看是否正在设置状态。