概要

아니, 그래서 무슨 쿼리를 날려줘야 하는 거에요?

バックエンドと通信すると、キー値を調整するのに多くの時間がかかる場合があります.
特に私には、すでに現れたパッケージを書く前に、私の考えに従ってそれを実現する習慣があります.
実用的な「qs」というパッケージでいいので、今回のプロジェクトでは必ずクエリーコンビネーションを作ります...このような感情のため、私は2日間頭をつかんだ.

第一の考え

qsはどうしたの?

このパッケージはどのように分けて、検索文字列に変換されますか?!ダウンジャケットに直接入って開けてみたいのですが...


ああ...この友達も大まかに繰り返しているようです.
オブジェクト配列のkey:valueシェイプ.
ああ!ボタンを押して条件を設定するのが一般的なので、このボタンで組み合わせクエリーのキーと値を伝えることができます!そう思います.

オブジェクト配列が必要です!

ボタンをクリックすると、そのキーは所定のカテゴリの値であるべきであり、

.

nameに値を付けて更新したらどうですか?

ちょっと最初に挿入(?)とても感動しました
onClickメソッドとなるgetEachQueryのクエリ配列を更新します.
このボタンをダブルクリックするとクエリーから消えてしまうため、ブランチも追加され、配列からキー値を消去できます.

クエリーはどのように作成されますか?

照会は?+...key=value&重複じゃないの?

一番前の疑問符は多分...ナビゲーションを定数に釘付けにする.
残りの部分では、クエリー・オブジェクトの配列を依存項目として使用し、計算機を返します.
key=value&は重複モードなので可能な部分です.
最後に&sliceでトリミングします.

最初のバージョン...

こんなの初めて(?!)バージョンです.
正直、私は絶対にきれいだとは言えません...
まず...もう帰りますか.

아니 이거 근데... 너무 더러워..

もう少し簡略化できないかな…?ちょっと難しいです.汚いですね.そんな気持ちで、新しい方法を探し始める.

Hello, useSearchParams!

아니 이게 뭐야.. 이게 이렇게 줄어든다고?

react-router-dom v 6からサポートを開始したuserSearchParamsは私の悩みを徹底的に解消しました.

const location = useLocation();
const nowLocation = new UseSearchParams(location.search)

たとえば、現在のクエリーを理解するために、以前はそうしていたようです.

const [searchParams] = useSearchParams();
const nowLocation = searchParams.toString();

この友达、直接吐き出しました!
試してみたら、SearchParamsをログに印刷

なんだよ.URLSearchParamsを使っています…?
ああ!私が解いたアクションはもう実現しました.ありがとうございました.

searchParams.get(key) : key에 대한 값 확인
searchParams.set(key,value) : key=value 객체 생성
searchParams.delete(key) : key 객체 삭제

私はよく読んでいませんが、主にこの方法を使っています.
見ただけで私がやったことと変わらないことが分かった.
それでも...

このHookの最終バージョンは以下の通りです.
ああ...簡単すぎる!
最大35行のコードは20行に減少しただけだ.
まったく.使ったことがある人はみな知っていて、どう見ても虚脱だと思っています.

の最後の部分

文章は短いが、二日間悩んだ.
どんなパターンか知っていますが...どのように組み合わせますか?と考える
愚かなことをたくさんして、パッケージを直接開けてヒントを得ました.
いずれにしても、私たちは実現し、私たちが知らないHookを見つけ、簡単な再構築を行いました.
あとフィルターに関係するものがある時は….
これを食べてみよう!!何か試してみる価値があるようです!