javascript - React Firebase 读取元素

Question

我正在尝试获取存储在“Nombre”中的值，但它根本不起作用，我做错了什么吗？

class Appp extends React.Component {
constructor() {
    super()
    this.state = { name: 'hey' }
}
componentDidMount() {
    const nameRef = firebase.database().ref().child('Anonimos').child('wx3czBh22dMQUTNDwD9l').child('Nombre')
    nameRef.on('value', snapshot => {
        this.setState({
            name: snapshot.val()
        })
    })
}

render() {
    return <h1>{this.state.name}</h1>
}
}

标签： javascriptreactjsfirebasefirebase-realtime-databasegoogle-cloud-firestore

Answer 1

您的代码使用 Firebase 实时数据库的 API。但屏幕截图显示了 Cloud Firestore 中的数据。虽然这两个数据库都是 Firebase 的一部分，但它们是完全独立的，其中一个的 API 无法访问另一个中的数据。

要访问 Cloud Firestore 中的数据，请遵循该数据库的文档： https: //firebase.google.com/docs/firestore/quickstart

就像是：

componentDidMount() {
    const nameRef = firebase.firestore().collection('Anonimos').doc('wx3czBh22dMQUTNDwD9l')
    nameRef.onSnapshot(doc => {
        this.setState({
            name: doc.data().Nombre
        })
    })
}

除了新语法之外，这里最大的变化是这段代码读取整个文档，而不仅仅是Nombre字段，然后只设置状态中的名称。因此，虽然最终结果相同，但它加载的数据比您的实时数据库示例要多，因为该 API 允许加载任何节点，而 Cloud Firestore 始终加载完整的文档。