web-dev-qa-db-ja.com

mapStateToProps内で、react-routerパラメーターを取得する方法は？

私は次の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でパラメータを使用するにはどうすればよいですか？

reactjsreduxreact-routerreact-router-v4
13
AnApprentice

これはうまくいきました：

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

したがって、やりたいことは、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)
  };
};

うまくいけば、それは役に立ちますが、あなたの値は州のルーティングオブジェクトにあるべきです

2
Alastair

反応ルーターを使用している場合は、this.props.params.id.を使用してください

ただし、これはルーターの定義方法によって異なります。あなたのルーターが

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

その後、それは動作します。しかし、あなたのルーターが

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

次に、this.props.params.numberを実行する必要があります

1
vineeth