Question

因此，基本上，我已经开始使用React，Redux和Firebase建立新的应用程序。我仍在学习，无法解决某些问题，但这是我真正陷入困境的第一刻。

我在Firestore中创建了一个名为“帖子”的集合，并手动创建了一个帖子，只是为了查看它是否正常工作。

不幸的是，实现我的代码后，我仍然收到错误消息：

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

似乎您的问题可能是您需要在{% extends 'base.html' %} {% block html %} <div class="container-fluid"> <div class="row"> <div class="col-md-7"> <h1>Express Yourself</h1> <form method="post" <input type="text"> {% csrf_token %} {{ form.post}} <br> <button class="btn btn-primary" type="submit">Post</button> </form> <h2>{{text}}</h2> {% for post in posts %} <h1>{{ post.post }}</h1> <p>Posted by {{ post.user.get_full_name }} {{ post.created }} </p> {% endfor %} </div> <div class="col-md-5"> <h2>other people</h2> </div> </div> </div> {% endblock %}组件中实例化类时尝试通过props访问$('#sscContent').find("h1").next().each(function(){ var $this = $(this); var t = $this.text(); $this.html(t.replace('<','<').replace('>', '>')); });类。

在您的进口商品中，您有：

Firebase

看起来好像您正在尝试使用HOC，但是看着Adminpanel，则没有迹象表明您传入了组件，然后将import { withFirebase } from '../Firebase'传递给了。

相反，请在您的Firebase.js组件中，尝试将导入更改为：

props

然后，在Adminpanel的构造函数中：

import Firebase from '../Firebase'

然后，尝试通过以下方式调用类方法：

Adminpanel

如何在React.js中访问其中的集合和文档？

1 个答案: