如何解决类型错误:ownProps.match 未定义
无法找到错误TypeError: ownProps.match
is undefined的解决方案。
我正在学习有关 react-redux
和 firebase 的教程以构建待办事项应用。下面的代码给出了当我在主页仪表板上单击我的任务/项目并从 firestore 的 projectDetails 页面中获取该特定项目的数据时重定向到的组件。
ownProps
函数中的 mapStatetoProps
导致上述错误。
对于解决此错误的任何帮助或实现此代码的替代方法,我们将不胜感激。
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
}
}
解决方法
要将路由器配置传递给 mapStateToProps,您需要使用 withRouter
包装器。
在docs中提到。
这应该有效:
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);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。