社区首页 >问答首页 >(将firebase快照ReactAssign到函数外部的变量

问(将firebase快照ReactAssign到函数外部的变量
EN

Stack Overflow用户

提问于 2019-03-14 19:15:42

回答 3查看 1.2K关注 0票数 0

您好，我正在尝试从我的数据库中获取数据，在componentDidMount()中，它可以很好地处理以下内容：

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

我只是想知道如何将这些数据赋值给一个可以在这个函数外部使用的变量，我尝试了设置状态，并使用了我在外部声明的变量，我没有得到任何工作:react native possible unhandled promise rejection (id 0) Typeerror: this.setState不是一个函数。谢谢

javascript

firebase

react-native

firebase-realtime-database

回答 3

Stack Overflow用户

回答已采纳

发布于 2019-03-14 19:26:32

将传递给.then的匿名函数切换为箭头函数，以允许您从类作用域使用this。

elsewhere上有很多关于这方面的信息

票数 0

Stack Overflow用户

发布于 2019-03-14 19:33:07

您必须在.then函数中使用setState。

然后，您可以使用this.state.userData.访问您的价值

它将在挂载后立即定义，然后在获取解析时定义，因此集成一个机制来检查它。

对于未定义的问题，一个简单的解决方案是：

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

编辑:同样，就像Kai指出的，如果你不使用箭头符号，我不确定你是否有权访问.then回调中的this实例。

票数 1

Stack Overflow用户

发布于 2019-03-14 20:16:47

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)
      }