开发者问题收集

mapStateToProps ownProps 参数为空

2017-08-29
5178

我是 React、React Router (v4) 和 Redux 的新手。我尝试通过访问 ownProps.match.params.idmapStateToProps(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);
1个回答

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

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

/course/course/:id 之前匹配,这就是为什么调用 ManageCoursePage 时没有 id 参数。 如果您只想在第一个路线中匹配 /course 而不是 /course/123 ,您可以设置 exact 属性

Steffen
2017-08-29