在获取数据时反应redux firestore mapStateToProps问题

时间:2019-12-02 01:39:43

标签: reactjs google-cloud-firestore react-redux react-redux-firebase

我陷入了一个非常奇怪的问题,问题是我正在获得像这样的Firestore收藏

import React, { Component } from 'react'
import Notification from './Notification'
import ProjectDetails from '../projects/ProjectDetails'
import ProjectList from '../projects/ProjectList'
import { connect } from 'react-redux'
import { firestoreConnect } from 'react-redux-firebase'
import { compose } from 'redux'

class Dashboard extends Component {
    render() {
        console.log('props are' , this.props);
        const {projects} = this.props.fireProjects;
        return (
            <div className="dashboard container">
                <div className="row">
                    <div className="col s12 m6">
                        <ProjectList projects={projects} />
                    </div>
                    <div className="col s12 m6">
                        <Notification />
                    </div>
                </div>
            </div>
        )
    }
}
const mapStateToProps = (state) => {
    console.log('from mstp' , state.firestore.ordered.projects);
    return {
        fireProjects : state.firestore.ordered.projects
    }
}
export default compose(
    connect(mapStateToProps),
    firestoreConnect([
        {collection : 'projects'}
    ])
    )(Dashboard)

当我在mapStateToProps函数中使用console.log时,我可以看到具有值的firebaseProjects对象,但是当我在组件代码中使用console.log的this.props时,我可以看到firebaseProjects:undefined。我该怎么办?我想设置具有来自firestore的firebaseProjects数据的组件的道具。 控制台结果为 enter image description here

1 个答案:

答案 0 :(得分:0)

我认为这是错字

const {projects} = this.props.firebaseProjects;

const mapStateToProps = (state) => {
    console.log('from mstp' , state.firestore.ordered.projects);
    return {
        fireProjects : state.firestore.ordered.projects
   }
}

mapStateToProps中,您将其命名为fireProjects,但您在组件中以firebaseProjects的身份访问它