我的 Fire Base 代码(React Native)出了什么问题

Question

尝试使用 Firebase 在 React Native 中设置一些测试数据。我已经使用 $yarn add firebase 成功安装。我在FB中添加了这样的测试数据：FB数据在我的项目中，我添加了以下代码：

import * as firebase from 'firebase' 
const firebaseConfig = {
    apiKey: "AIzaSyBNKM6Ptbynkg5dEJkwMHNsZhUCsW2JqGE",
    authDomain: "testproject-f4c9f.firebaseapp.com",
    databaseURL: "https://testproject-f4c9f.firebaseio.com",
    projectId: "testproject-f4c9f",
    storageBucket: "testproject-f4c9f.appspot.com",
    messagingSenderId: "48530616964"
}
firebase.initializeApp(firebaseConfig)

然后在渲染中：

let mytext = ""
let testing = 
firebase.database().ref('testCategory/test1/FirstHeader');
testing.on('value', function(snapshot) {
    mytext = snapshot.val()
});
return(
    <View>
       <Text>{mytext}</Text>
    </View>
);

运行应用程序，没有任何显示。任何想法将不胜感激。

更新：我设法在console.log中使用以下代码使其正确：

let child = ""
var ref = firebase.database().ref("testCategory");
ref.once("value")
.then(function(snapshot) {
child = snapshot.child("test1/testHeader").val() 
console.log({child})
});

但由于某种原因，我无法在文本输出中打印它：

return(
    <View>
       <Text>{this.child}</Text>
    </View>
);

只是一片空白...

Answer 1

您需要将数据从回调传递到视图。您应该使用像 Redux 或 MobX 这样的状态管理器，但对于此示例，您可以只使用组件状态。

这就是您的组件应该是什么样子。

class Hello extends Component {
  state = {
    child: ''
  }
  componentDidMount() {
    firebase
      .database()
      .ref('testCategory')
      .on('value')
      .then(snapshot => {
        const child = snapshot.child('test1/testHeader').val()
        this.setState({
          child
        })
      })
  }
  render() {
    const { child } = this.state
    return (
      <View>
        <Text>{child}</Text>
      </View>
    )
  }
}

哒哒！