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

Question

我想查看我的项目的详细信息，但无法显示其价值。从 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

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

Answer 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。

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

Show project detail using react-redux-firebase

javascript

firebase

react-redux

react-redux-firebase