我想查看我的项目的详细信息,但我无法获得要显示的值。从 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);
左边的卡片是我的项目。点击一个应该会显示该项目的详细信息页面。
答案 0 :(得分:0)
您在 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
。