Loading...

(ReactAssign firebase snapshot to a variable outside of the function


Hi i am trying to get the data from my database, in componentDidMount(), it works fine with this :

componentDidMount() {
  firebase.database().ref('/users/' + user.uid).once('value').then(function(snapshot) { 
      var valeur = snapshot.val();
      return valeur;
  });
  this.setState({userData:valeur});
}

I just want to know how can i assign this data to a variable that can be use outside of this function, i tried setstate and using variable that i declare outside nothing work i get :react native possible unhandled promise rejection (id 0) Typeerror: this.setState is not a function. Thank you

- - Source

Answers

answered 1 week ago Kai #1

Switch the anonymous function that you're passing to .then to an arrow function to allow you to use the this from the class scope.

Plenty of information elsewhere on this

answered 1 week ago Quentin C #2

You have to setState inside the .then function.

Then you can access your value with this.state.userData.

It will be undefined just after mounting then defined when your fetch resolves, so integrate a mechanism that checks for that.

For your undefined problem, a simple solution would be that for instance:

render() {
    return (
      <View>{this.state.userData && this.state.userData.photo}</View>
    )
}

Edit: also like Kai pointed out I am not sure you have access to this instance inside .then callback if you don't use arrow notation.

answered 1 week ago quentin mayer #3

class Search extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      films: [],
      isLoading: false,
      userData: null
   }
   this.searchedText = ""
   this.localData=null;
  }



  componentWillMount() {

    user = firebase.auth().currentUser;

      firebase.database().ref('/users/' + user.uid).once('value').then(snapshot => {

      pro = snapshot.val()
      this.setState({userData: pro});

});


    this.setState({ isLoading: true })
    getFilmsFromApiWithSearchedText().then(data => this.setState({ films: data.results }))
      this.setState({ 
       films: data.results,
       isLoading: false
      })


      console.log(this.state.userData)
  }


  _displayLoading() {
    if (this.state.isLoading) {
      return (
        <View style={styles.loading_container}>
          <ActivityIndicator size='large' />
        </View>
      )
    }
  }

  _signOut() {
    firebase.auth().signOut();
  }

  _displayDetailForFilm = (idFilm) => {
    this.props.navigation.navigate("FilmDetail", { idFilm: idFilm })
  }

render() {
    return (
      <View style={styles.main_container}>
        <StatusBar
        hidden = {false}
        backgroundColor="#F1D145"
        ></StatusBar>
        <TouchableOpacity onPress={() => this._signOut()} style={styles.button} activeOpacity={0.8}>
          <Text style={styles.button_text}>Déconnexion</Text>
        </TouchableOpacity>
        <Text>{user.uid}</Text>

        <FlatList
        data={this.state.films}
        keyExtractor={(item) => item.id.toString()}
        renderItem={({item}) => <FilmItem film={item} displayDetailForFilm={this._displayDetailForFilm}/>}
        />
        {this._displayLoading()}
      </View>
    )
}
}


        this.setState({ isLoading: true })
        getFilmsFromApiWithSearchedText().then(data => this.setState({ films: data.results }))
          this.setState({ 
           films: data.results,
           isLoading: false
          })


          console.log(this.state.userData)
      }

Here is all the code i already do console.log(this.state.userData) it return null

comments powered by Disqus