mapStateToProps ownProps 参数为空

Posted 2023-02-22

【中文标题】mapStateToProps ownProps 参数为空

【英文标题】：mapStateToProps ownProps params are empty

【发布时间】：2018-02-07 04:24:01

【问题描述】：

我是 React、React Router (v4) 和 Redux 的新手。我试图通过访问ownProps.match.params.id 来访问来自mapStateToProps(state, ownProps) 的URL 参数，但params 数组始终为空。我已经使用调试器检查了 ownProps 并且应该传递的 id 参数不在 ownProps 的任何地方。

这是我的路线中的一个 sn-p：

    <Switch>
      <Route exact path='/' component=HomePage />
      <Route path='/about' component=AboutPage />
      <Route path='/course' component=ManageCoursePage />
      <Route path='/course/:id' component=ManageCoursePage />
      <Route path='/courses' component=CoursesPage />
    </Switch>

这里是来自ManageCoursePage.js的相关代码：

class ManageCoursePage extends React.Component 
  constructor(props, context) 
    super(props, context);

    this.state = 
      course: Object.assign(, props.course),
      errors: ,
    ;
  


function mapStateToProps(state, ownProps) 
  const courseId = ownProps.match.params.id;
  ...


export default connect(mapStateToProps, mapDispatchToProps)(ManageCoursePage);

【参考方案1】：

您必须翻转以下路由的顺序或将exact 属性设置为第一条路由。

<Route path='/course' component=ManageCoursePage />
<Route path='/course/:id' component=ManageCoursePage />

/course 在 /course/:id 之前匹配，这就是为什么在没有 id 参数的情况下调用 ManageCoursePage。 如果您只想在第一条路线中匹配/course 而不是/course/123，您可以设置exact property。