React-Native - TextInput中的Firebase数据

Question

我可以从Firebase中检索数据并在之后立即显示。但是当我尝试在渲染中使用它时，它是空白的。我是新来的反应原生，可能会做一些不正确的事情。我如何使用Firebase中的数据进行渲染？

这里是我的代码：

componentWillMount() { 
    firebase.database().ref('/users/' +  userId).once('value').then(function(snapshot) { 
                   var  DisplayEmail = snapshot.val().Email;                  alert(DisplayEmail); 
                   }); 

}

render() { 
     return (

      {alert(this.props.DisplayEmail)} 

      <TextInput style={styles.input} 
      autoFocus = {true} 
      autoCorrect = {false} 
      autoCapitalize = "none" 
      placeholder={this.DisplayEmail} 
      keyboardType="email-address" 
      underlineColorAndroid='transparent' 
      editable={false} 
      /> 

    ) 
} 

Answer 1

每当你想在渲染上显示某些东西时，你应该把它放在状态上。通过更改状态，您可以使页面重新呈现并使用新状态进行更新。因此，当您进行Firebase通话时，请将其添加到状态。

componentWillMount() { 
    firebase.database().ref('/users/' + userId).on('value', snapshot => { 
    this.setState({ DisplayEmail: snapshot.val().Email }); 
    }); 
} 

调用set state只是将您的状态更改与当前状态合并。现在你应该能够从渲染中调用状态并让它工作。

render() { 
    return (
    {alert(this.props.DisplayEmail)} 
    <TextInput style={styles.input} 
     autoFocus={true} 
     autoCorrect={false} 
     autoCapitalize="none" 
     placeholder={this.state.DisplayEmail} 
     keyboardType="email-address" 
     underlineColorAndroid='transparent' 
     editable={false} 
    /> 
) 
} 

Answer 2

它必须是工作:)

 componentWillMount() { 
    firebase.database().ref('/users/' + userId) 
       .on('value', snapshot => { 
         this.state = { DisplayEmail: snapshot.val().Email 
     }); 

} 

---

render() { 
    return (

     {alert(this.props.DisplayEmail)} 

     <TextInput style={styles.input} 
     autoFocus = {true} 
     autoCorrect = {false} 
     autoCapitalize = "none" 
     placeholder={this.state.DisplayEmail} 
     keyboardType="email-address" 
     underlineColorAndroid='transparent' 
     editable={false} 
     /> 

) 

}