TypeError: ownProps.match is Undefined

Question

无法找到错误 TypeError: ownProps.match is undefined.

的解决方案

我正在按照 react-redux 和 firebase 上的教程构建待办事项应用程序。下面的代码给出了当我在主仪表板上单击我的 Task/project 并从 firestore 的项目详细信息页面中获取该特定项目的数据时我被重定向到的组件。

mapStateToProps 函数中的 ownProps 导致了上述错误。

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

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 包装器。

在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);

TypeError: ownProps.match is Undefined

TypeError: ownProps.match is Undefined

reactjs

firebase

redux

react-redux

mapstatetoprops