类型错误:ownProps.match未定义

Question

无法找到错误的解决方案类型错误：ownProps.match未定义。

我正在遵循react-redux和firebase的教程来构建一个待办事项应用程序。下面的代码给出了当我在主面板上单击我的任务/项目并从firestore的项目详细信息页面中获取特定项目的数据时，我被重定向到的组件。

CCD_ 4函数中的CCD_。

任何解决此错误的帮助或实现此代码的替代方法都将不胜感激。

import React from 'react'
import { connect } from 'react-redux'
import { firestoreConnect } from 'react-redux-firebase'
import { compose } from 'redux'
const ProjectDetails = (props) => {
const { projects } = props;
if (projects) {
return (
<div className="container section project-details">
<div className="card z-depth-0">
<div className="card-content">
<span className="card-title">{projects.title}</span>
<p>{projects.content}</p>
</div>
<div className="card-action grey lighten-4 grey-text">
<div>Posted by {projects.authorFirstName} {projects.authorLastName}</div>
<div>2nd September, 2am</div>
</div>
</div>
</div>
)
} else {
return (
<div className="container center">
<p>Loading project...</p>
</div>
)
}
}
const mapStateToProps = (state, ownProps) => {
// console.log(state);
const id = ownProps.match.params.id;
const projects = state.firestore.data.projects;
const project = projects ? projects[id] : null
return {
project: project
}
}
export default compose(
connect(mapStateToProps),
firestoreConnect([{
collection: 'projects'
}])
)(ProjectDetails);

在这里面对上述代码中的问题：

const mapStateToProps = (state, ownProps) => {
// console.log(state);
const id = ownProps.match.params.id;
const projects = state.firestore.data.projects;
const project = projects ? projects[id] : null
return {
project: project
}
}

Answer 1

要将路由器配置传递给mapStateToProps，需要使用withRouter包装器。

在文件中提到。

这应该有效：

const mapStateToProps = (state, ownProps) => {
// console.log(state);
const id = ownProps.match.params.id;
const projects = state.firestore.data.projects;
const project = projects ? projects[id] : null
return {
project: project
}
}
export default compose(
withRouter,
connect(mapStateToProps),
firestoreConnect([{
collection: 'projects'
}])
)(ProjectDetails);