Как получить доступ к коллекции и документам в ней в React.js?

Question

Итак, в основном я начал строить новое приложение с React, Redux и Firebase.Я все еще учусь и не могу решить некоторые вещи, но это первый момент, когда я действительно застрял.

Я создал коллекцию в Firestore под названием 'posts' и создал один пост вручную, чтобыпосмотрите, работает ли он.

К сожалению, после реализации моего кода я получаю сообщение об ошибке:

TypeError: Cannot read property 'posts' of undefined
AdminpanelAuth.componentDidMount
/src/components/Admin/Adminpanel.js:23
  20 |    componentDidMount() {
  21 |        this.setState({ loading: true });
  22 | 
> 23 |        this.props.firebase.posts().on('value', snapshot => { <- HERE IS THE PROBLEM

Я пробовал разные варианты и разные подходы, но ни один из них, похоже, не работал.Кто-нибудь может посоветовать?Ниже я прилагаю часть моего кода Adminpanel.js и Firebase.js

Firebase.js

import app from 'firebase/app';
import 'firebase/auth';
import 'firebase/firestore';

const firebaseConfig = {
    my config here
  };

  class Firebase {
    constructor() {
      app.initializeApp(firebaseConfig);
      // initialize Firebase Authenticator
      this.auth = app.auth();
      // initialize Firebase Realtime Database
      this.db = app.firestore();

    }

    // Initialize two functions that connect to Firebase : Log In and Log Out

    doSignInWithEmailAndPassword = (email, password) =>
    this.auth.signInWithEmailAndPassword(email, password);

    doSignOut = () => this.auth.signOut();

    // Initialize functions for posts

    post = pid => this.db.doc('posts'+pid);
    posts = () => this.db.collection('posts');
  }


export default Firebase;

Adminpanel.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { compose } from 'recompose'
import { withFirebase } from '../Firebase'
import { withAuthorisation } from '../Session'
import SignOutBtn from '../SignOutBtn'

const Adminpanel = ({authUser}) => (
<div>{authUser ? <AdminpanelAuth /> : <AdminpanelNonAuth />}</div>
)

class AdminpanelAuth extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loading:false,
            posts:[]
        }
    }
    componentDidMount() {
        this.setState({ loading: true });

        this.props.firebase.posts().on('value', snapshot => {
      const postsObject = snapshot.val();

      const postsList = Object.keys(postsObject).map(key => ({
        ...postsObject[key],
        pid: key,
      }));

      this.setState({
        posts: postsList,
        loading: false,
      });
        });
    }

. / Firebase/index.js

import FirebaseContext, { withFirebase } from './context';
import Firebase from './Firebase';

export default Firebase;

export { FirebaseContext, withFirebase };

Answer 1

Похоже, что ваша проблема может заключаться в том, что вы пытаетесь получить доступ к своему классу Firebase через реквизиты, когда его необходимо создать в компоненте Adminpanel.

В ваших операциях импорта вы имеете:

import { withFirebase } from '../Firebase'

Что выглядит так, как будто вы пытаетесь использовать HOC, но, глядя на Firebase.js, нет никаких признаков того, что вы передаете компонент внутрь, чтобы затем передать props в.

Вместо этого, в вашем Adminpanel компоненте, попробуйте изменить ваш импорт на:

import Firebase from '../Firebase'

Затем в конструкторе Adminpanel:

constructor(props) {
    super(props);
    this.state = {
        loading:false,
        posts:[]
    }
  this.firebase = new Firebase()
}

Затем попробуйте вызватьметод класса, выполнив:

this.firebase.posts().on('value', snapshot => {