React-Native - TextInput

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

必须工作：）

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

)

}

Answer 2

每当你想在渲染上显示某些内容时，你应该将它置于状态。通过更改状态，您将使页面重新呈现并使用新状态进行更新。因此，当您进行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}
    />
  )
}