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

) 

}