- 履歴一覧
- 差分 を表示
- 現在との差分 を表示
- ソース を表示
- React/クエリストリングを処理する へ行く。
- 1 (2018-01-18 (木) 17:46:51)
キーワード†
- React
- Query string
- URLSearchParams
したいこと†
- クエリストリングを受け取って状態を初期化する
- ボタンクリックなどで状態を変更してURL（クエリストリング）も変更する
どうやって†
最終的には次のような形にできる。
class Hoge extends React.Component {
componentDidMount() {
this.update(this.props)
}
refresh() {
const { location, history } = this.props
const { search } = location
const reconstructedSearch = ※ 新しいクエリストリング（search）を作成する
history.push({
search: reconstructedSearch
})
}
componentWillReceiveProps(nextProps) {
if (nextProps.location.search === this.props.location.search) return
this.update(nextProps)
}
update(props) {
※ props（this.propsかnextProps）を使って状態を初期化・変更する
}
}
ちなみに†
searchの分解や再構成はURLSearchParamsを使えば楽にできる。