【问题标题】:react redux firestore mapStateToProps issue while getting data在获取数据时对 redux firestore mapStateToProps 问题做出反应
【发布时间】:2020-03-26 15:14:09
【问题描述】:

我陷入了一个非常奇怪的问题,问题是我正在获取这样的 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 对象,但是当我在组件代码 this.props 中使用 console.log 时,我看到 firebaseProjects : undefined 。我该怎么办?我想设置具有来自 firestore 的 firebaseProjects 数据的组件的道具。 控制台结果是

【问题讨论】:

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


    【解决方案1】:

    我认为是这个错字

    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 的身份访问它

    【讨论】:

    • 不不,错误不是错字..当我们在渲染函数中的组件中使用 console.log(this.props) 时,我们将看到我创建的道具,即 fireProjects 未定义.. .
    猜你喜欢
    • 2017-12-05
    • 2018-05-27
    • 1970-01-01
    • 2021-12-05
    • 2019-07-26
    • 1970-01-01
    • 2020-01-16
    • 2021-06-25
    • 1970-01-01
    相关资源
    最近更新 更多