Question

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

在我的反应组件中，我有：

  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中使用params？

由于

Answer 1

这最终起作用了：

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

Answer 2

所以你想要做的是将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 3

如果您使用反应路由器，只需使用this.props.params.id.

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

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

然后它的工作原理。但如果您的路由器就像

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

然后你必须做this.props.params.number

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

3 个答案: