（ReactAssign firebase 快照到函数外部的变量答案

【问题标题】：(ReactAssign firebase snapshot to a variable outside of the function（ReactAssign firebase 快照到函数外部的变量
【发布时间】：2019-03-14 19:15:41
【问题描述】：

您好，我正在尝试从我的数据库中获取数据，在 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 ) 类型错误：this.setState 不是函数。谢谢

【问题讨论】：

标签： javascript firebase react-native firebase-realtime-database

【解决方案1】：

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

【讨论】：

【解决方案2】：

您必须在 .then 函数中设置状态。

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

它将在安装后未定义，然后在您的 fetch 解析时定义，因此请集成一个检查机制。

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

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

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

【讨论】：

是的，我现在工作，但它未定义所以你的意思是什么类型的系统？
您能否通过 console.log 快照 .val 确定它是否已定义？在.then里面
是的，它在 then 内部工作，但不在外部，我认为它的原因是它在 .then 结束之前执行它所以有没有办法等待 .then 完成，然后再继续执行代码
请显示您的所有代码并将 console.log(this.state.userData) 放入您的组件中
谢谢，尝试使用 componentDidMount 而不是 WillMount。来自 React 文档：Avoid introducing any side-effects or subscriptions in this method. For those use cases, use componentDidMount() instead.。 WillMount 也被认为已弃用

【解决方案3】：

将您传递给.then 的匿名函数切换为箭头函数，以允许您在类范围内使用this。

关于此的大量信息elsewhere

【讨论】：

我该怎么做？
而不是.then(function(snapshot) {.... 使用.then(snapshot => {.... 然后你可以调用setState