1

无法找到错误TypeError: ownProps.matchis 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
  }
}
4

1 回答 1

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);
于 2021-03-27T11:52:40.977 回答