Question

嗨，我正在尝试从我的数据库中componentDidMount（）中获取数据，它可以很好地与此配合使用：

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

我只想知道如何将数据分配给可以在此函数之外使用的变量，我尝试了setstate并使用了我声明没有任何作用的变量：react native可能未处理的诺言拒绝（id 0 ）Typeerror：this.setState不是函数。谢谢

Answer 1

您必须在.then函数内设置setState。

然后，您可以使用this.state.userData.

访问值

安装后它将是未定义的，然后在获取解析时定义它，因此请集成一种机制来对其进行检查。

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

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

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

Answer 2

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

这是我已经做过的所有代码console.log（this.state.userData）它返回null

Answer 3

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

关于此的大量信息elsewhere

（将ReactAsfire Firebase快照分配给函数外部的变量

3 个答案: