mapStateToProps ownProps 参数为空

Question

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

中的任何地方

这是我的路线的片段：

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

Answer 1

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

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

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

mapStateToProps ownProps 参数为空

mapStateToProps ownProps params are empty

reactjs

react-router

redux

react-redux

react-router-dom