类型错误：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);