代码之家 › 专栏 › 技术社区 › CNK2343

React Native-TextInput中的Firebase数据

render firebase-realtime-database react-native firebase

CNK2343 · 技术社区 · 8 年前

我可以从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}
            />

    )
 }

2 回复 | 直到 8 年前

Ramzi C. 8 年前

无论何时,只要您想在渲染时显示某些内容,就应该将其置于state状态。通过更改状态,您将导致页面重新呈现并用新状态更新。因此,当您调用firebase时,请将其添加到状态。

componentWillMount() {
  firebase.database().ref('/users/' + userId).on('value', snapshot => {
    this.setState({ 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}
    />
  )
}

Burhan YÄ±lmaz 8 年前

它必须是工作:)

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

)

}

推荐文章

TOM · 检查Firebase数据库子项是否已存在,如果不存在,添加它的最佳方法是什么?

1 年前

Guy Sadoun · 如果正在监听的引用被删除,ValueEventListener是否会继续监听?

1 年前

moco · 通过CLI向Firebase实时数据库发送有效JSON文件时出现错误400

1 年前

MN Dijital · 为什么只显示新添加的数据而不显示所有数据?

2 年前

Computable · 未验证请求的Firebase应用程序检查(RTDB)失败模式

2 年前

Harsh Master · 为android应用程序实现自动通知

2 年前

Jakub Olszewski · com.google.firebase.database.DatabaseException:无法将java.lang.Boolean类型的值转换为String这是怎么回事?

2 年前

mkty · 如何使用react中的map打印JSON数据

2 年前

Rohan Raj · 如何在函数中更改firebase实时数据库的子级值,我试过了,但不起作用。请使用kotlin

2 年前

Michel · 使用Firebase CLI选择文档

2 年前