使用 react-redux-firebase 显示项目详细信息答案

【问题标题】：Show project detail using react-redux-firebase使用 react-redux-firebase 显示项目详细信息
【发布时间】：2021-04-01 16:40:34
【问题描述】：

我想查看我的项目的详细信息，但我无法获得要展示的价值。从console.log，我看到project 是undefined。这意味着道具不带任何内容。

import React from 'react';
import { connect } from 'react-redux';
import { firestoreConnect } from 'react-redux-firebase';
import { compose } from 'redux';

const DetailProject = (props) => {
    // console.log(props)
    const { project } = props
    
    if (project) {
        return (
            <div className="container section project-details">
                <div className="card z-depth-0">
                    <div className="card-content">
                        <span className="card-title">{ project.title }</span>
                        <p>{ project.content }</p>
                    </div>
                    <div className="card-action gret lighten-4 grey-text">
                        <div>Post by { project.authorFirstname }</div>
                        <div>Create at { project.createAt }</div>
                    </div>
                </div>
            </div>
        )
    } else {
        return (
            <div className="container center">
                <p>Project loading...</p>
            </div>
        )
    }
}
   
const mapStateToProps = (state, ownProps) => {
    
    const id = ownProps.match.params.id;
    const projects = state.firestore.ordered.projects;
    const project = projects ? projects[id] : null;
    return {
        project: project
    }
}
export default compose(
    connect(mapStateToProps),
    firestoreConnect([
        { collection: 'projects' }
    ])
)(DetailProject);

Complete Code on CodeSandbox

左边的卡片是我的项目。单击一个应显示该项目的详细信息页面。

【问题讨论】：

标签： javascript firebase react-redux react-redux-firebase

【解决方案1】：

您在 mapStateToProps 中错误地访问了 Firestore 数据。

state.firestore.ordered.projects 是按正确顺序排列的项目的array。您正在使用 id 作为数组索引，因此您将找不到匹配项。

您可以通过id 访问项目，但您需要查看state.firestore.data.projects。这是id 键入的项目字典。

const mapStateToProps = (state, ownProps) => {

    const id = ownProps.match.params.id;
    const projects = state.firestore.data.projects || {}

    return {
        project: projects[id]
    }
}

这将为您提供正确的 project 属性。

现在您在组件中有一个新错误需要修复。 project.createAt 是一个object，所以你需要把它格式化成一个日期string。

【讨论】：