ルータのクエリをコンポーネントの状態にバインドする

Question

私は、ユーザが前/次のオプションを確認または変更するオプションを表示するコンポーネントを作成しようとしています。このコンポーネントは、ルートに割り当てられている：

クエリ「オプション」が表示されたオプションをし、「次へ」をクリックするには、このクエリを変更します

/choose?option=1 

に「オプション= 2」。

クエリを読み、状態に割り当てが（ES6 +を使用して）非常に単純です：

componentWillMount() { 
    const { query } = this.props.location; 
    this.setState({ 
    option: query.option ? Number.parseInt(query.option, 10) : 1, 
    }); 
} 

私はまた新しい歴史を作成せずにURLを更新し、ルータに場所を交換する方法を作りました希望の動作状態、：

setOption = (newOption) => { 
    const newLocation = Object.assign(this.props.location, { 
    query: { 
     option: newOption, 
    }, 
    }); 

    this.context.router.replace(newLocation); 
}; 

問題：

私はこの場所はintを押しますoルータ、それは自分のコンポーネントを再レンダリングします。レンダリングメソッドの内部で状態を更新するのは良い考えではありません。私はこのための州を使用して落とすことができ、ちょうど質問のparamsを使用するが、私はこのオプションが好きではない。

これらのクエリパラメータをコンポーネント状態にバインドする方法はありますか？一つの方法を見つけ

Answer 1

はそれをしますか：

componentWillMount() { 
    // Triggered when component is created 
    this.updateState(this.props); 
    } 

    componentWillReceiveProps(nextProps) { 
    // Triggered when router updates location 
    this.updateState(nextProps); 
    } 

    setOption = (newOption) => { 
    const newLocation = Object.assign(this.props.location, { 
     query: { 
     option: newOption, 
     }, 
    }); 

    this.context.router.replace(newLocation); 
    }; 

    updateState = (props) => { 
    const { query } = props.location; 
    this.setState({ 
     option: query.option ? Number.parseInt(query.option, 10) : 1, 
    }); 
    }; 

私は提案をいただければと思います:)