我无法在React Native中设置setState

时间:2019-01-30 11:29:07

标签: android reactjs react-native setstate

在这个项目中,我想使用从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>
          )}}

2 个答案:

答案 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

您可以检查一下componentDidUpdate

中是否有您要设置状态的地方

https://reactjs.org/docs/react-component.html#componentdidupdate

componentDidUpdate(prevProps, prevState) {
  console.warn('prevState: ', prevState.userType, 'newState: ', this.state.userType)
}

每当状态更改时,它应该显示一个console.warn,它应该允许您查看是否正在设置状态。