Я не могу установить состояние в React Native

Question

В этом проекте я хочу установить состояние 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>
          )}}

Answer 1

Ваш state обновляется, однако вы звоните своему alert не в то время, поэтому оно использует предыдущее значение state.

Состояние асинхронно, что означает, что для этого требуется времядля этого, чтобы установить.Таким образом, в вашем существующем коде состояние не было обновлено к тому времени, когда вы вызываете вашу alert

Если вы используете функцию обратного вызова, то вы можете увидеть изменения состояния после того, как они произошли.

firebase.database().ref(userstype).on('value',  (snapshot) => {
  this.setState=({userType:snapshot.val()}, () => {
    alert(this.state.userType)
    })
});

Я бы посоветовал вам прочесть эти замечательные статьи Майкла Чана, которые показывают, как правильно использовать 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 при каждом изменении состояния, оно должно позволять вам видеть, устанавливается ли состояние.

Answer 2

Я обновил ваш метод 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>
          )}}

Надеюсь, это будет работать для вас!Спасибо