開始行: * キーワード [#vc2ae9e6] - React - react-router - Query string - URLSearchParams * したいこと [#pbe1e17f] - クエリストリングを受け取って状態を初期化する - ボタンクリックなどで状態を変更してURL（クエリストリング... * どうやって [#p8530152] 最終的には次のような形にできる。 class Hoge extends React.Component { // this.update()で状態を初期化する componentDidMount() { this.update(this.props) } // ボタンクリックなどで // 新しいクエリストリングを作成してURLを変更する // ここでは状態を変更しない refresh() { const { location, history } = this.props const { search } = location const reconstructedSearch = ※ 新しいクエリストリング... history.push({ search: reconstructedSearch }) } // 新しいpropsを受け取ったとき // this.update()で状態を変更する // ただし、クエリストリングの変更があったときだけ componentWillReceiveProps(nextProps) { if (nextProps.location.search === this.props.locatio... this.update(nextProps) } // 状態を初期化（または変更）する update(props) { ※ props（this.propsかnextProps）を使って状態を初期化... } } * ちなみに [#w5c7ad19] searchの分解や再構成はURLSearchParamsを使えば楽にできる。 * 参考 [#o6befa26] - [[react-routerでquery stringを扱う - Qiita>https://qiit... - [[ReactのcomponentWillReceiveProps内ではまだpropsは反映... - [[URLSearchParams - Web API インターフェイス | MDN>http... 終了行: * キーワード [#vc2ae9e6] - React - react-router - Query string - URLSearchParams * したいこと [#pbe1e17f] - クエリストリングを受け取って状態を初期化する - ボタンクリックなどで状態を変更してURL（クエリストリング... * どうやって [#p8530152] 最終的には次のような形にできる。 class Hoge extends React.Component { // this.update()で状態を初期化する componentDidMount() { this.update(this.props) } // ボタンクリックなどで // 新しいクエリストリングを作成してURLを変更する // ここでは状態を変更しない refresh() { const { location, history } = this.props const { search } = location const reconstructedSearch = ※ 新しいクエリストリング... history.push({ search: reconstructedSearch }) } // 新しいpropsを受け取ったとき // this.update()で状態を変更する // ただし、クエリストリングの変更があったときだけ componentWillReceiveProps(nextProps) { if (nextProps.location.search === this.props.locatio... this.update(nextProps) } // 状態を初期化（または変更）する update(props) { ※ props（this.propsかnextProps）を使って状態を初期化... } } * ちなみに [#w5c7ad19] searchの分解や再構成はURLSearchParamsを使えば楽にできる。 * 参考 [#o6befa26] - [[react-routerでquery stringを扱う - Qiita>https://qiit... - [[ReactのcomponentWillReceiveProps内ではまだpropsは反映... - [[URLSearchParams - Web API インターフェイス | MDN>http... ページ名: