在 mapStateToProps 中，如何获取 react-router 参数？

Question

我有以下 URL：http://localhost:4400/skills/3

在我的 React 组件中，我有：

  constructor(props) {
    super(props);
    this.state = { skill_id: props.match.params.skill_id };
  }

....

const mapStateToProps = (state, ownProps) => {
  return {
    skill_id: state.skill_id,
    ratingsBySkillId: state.rating.by_skill_id.find(el => el.skill_id === skill_id)
  };
};

问题是 state.skill_id 在 mapStateToProps 中不可用？为什么？如何在 mapStateToProps 中使用参数？

Answer 1

所以你想要做的是将 mapStateToProps 中的 skill_id 映射到存储在 react-router 状态中的值。那么你只需引入 skill_id

此外，我会推荐一些逻辑来检查 skill_id 是否未定义，因为只有当用户具有 skill_id

的值时，该键才会在对象中生成

 constructor(props) {
  super(props);
  this.state = { skill_id: props.skill_id };
}

....

const mapStateToProps = (state, ownProps) => {
  return {
     skill_id: (('skill_id' in state.routing.locationBeforeTransitions.query) ? state.routing.locationBeforeTransitions.query.skill_id: false),
     ratingsBySkillId: state.rating.by_skill_id.find(el => el.skill_id === skill_id)
  };
};

希望这有帮助，但你的值应该在状态的路由对象中

Answer 2

如果你使用 React 路由器，只需使用 this.props.params.id.

这取决于您如何定义路由器。如果你的路由器像

<route path = `/skills/:id` component = {yourComponent} />

然后就可以了。但是如果你的路由器像

<route path = `/skills/:number` component = {yourComponent} />

那么你必须做 this.props.params.number

Answer 3

这最终成功了：

const mapStateToProps = (state, ownProps) => {
  const skill_id = ownProps.match.params.skill_id;
....

在 mapStateToProps 中，如何获取 react-router 参数？

Within mapStateToProps, how to obtain a react-router param?

reactjs

react-router

redux

react-router-v4