Clever Geek Handbook

Reactでクエリ文字列を操作する

ねえ。これは、reactでの作業で見逃したパッケージに関する記事です。



画像



具体的には、検索バーからのクエリを改善および促進するためのパッケージについてです。



今どうやってやるの？



値の取得



クエリ文字列から値を取得するにはどうすればよいですか？私はこのようなものだと思います： 



const { item } = queryString.parse(props.location.search);


または、URLSearchParamsに精通している場合は、次のように実行できます。 



const params = new URLSearchParams(props.location.search);
const item = params.get('item');


どちらのオプションがより好ましいかは完全には明確ではありません。1つ目はnpmパッケージをプルしますが、どこでも機能し、2つ目はブラウザーに組み込まれていますが、IE（mozilla）に問題がある可能性があります。



設定値



どういうわけかそれを整理しましたが、それでも私たちが望んでいたのとまったく同じ結果が得られました。値の設定に移りましょう。これはすべて、すでにパラメータが追加された文字列を受け取るhistory.pushを使用して行われます。たとえば、次のようになります。 



history.push('/path?item=my-item-data')


より複雑な構造の場合は、クエリ文字列を使用する必要があります。 



const query = queryString.stringify({ item: "my-item-data" });
history.push(`/?${query}`);


またはURLSearchParams： 



const query = new URLSearchParams();
query.set("item", "my-item-data");
history.push(`/?${query}`);


効果



はい。私たちは常に文字列データを受け取る（そしてそれを解析する必要がある）という事実にもかかわらず、数字を期待し、単語が来る（ユーザーが文字列のクエリを変更することを禁止されていない）場合にも問題がありますが、チェックをフェンスして値をプッシュする必要がありますあなた自身。



リクエストフィールドを現在表示されているコンポーネントに依存させる必要がある場合、ほとんどの問題が発生します。各コンポーネントは1つのグローバル状態で機能し、既存の値に依存して任意に変更します。追加するには、独自の値だけでなく追加する必要があります。 、および調整する残りのすべて、次のようなもの： 



const oldQuery = queryString.parse(location.search);
const query = queryString.stringify({ item: "my-item-data" });
history.push(`/?${{...oldQuery,  ...query}}`);


もちろん、これを関数に移動する可能性が高く、操作する方がすでに便利です。ただし、値の読み取り、値の確認、渡された値に関連するエラーの処理、さらにはそれらを再度プッシュするための関数をフェンスする必要があります。それ以外の場合は、自分で値を変更し、文字列を同じままにします。



もちろん、後で自分の後で値をクリアする必要もあります。もちろん、history.pushがそれを行いますが、気にせず、あなたの代わりに他の人にそれを行わせる方がはるかに簡単です。



はい。私は何を提案していますか？



私はあなたのために、そしてもっと便利な方法でそれをしたと思います。次に、

react-location- querynpmパッケージについて説明します。これは注目に値するかもしれません。



このパッケージは、フックとHOCコンポーネント（フックのラッパーのみ）を実装して、検索バーでパラメーターがどのように機能するかについてのルールを設定します。ここで、コンポーネントの1つに値を設定するか、他のコンポーネントで値を取得できます（ツリーの上位にありますが、そうしないでください）。 ）。



例



たとえば、UsersListコンポーネントとControlsコンポーネントを含むUsersPageページがあります。UsersListはユーザーのリストをロードして表示するためのものであり、Controlsはユーザーフィルタリングを設定するためのものです。すべてを次のように表すことができます。 



const UsersPage = () => {
  const [type] = useLocationField('type', 'github');

  return ...;
}

const UsersList = () => {
  const [page, setPage] = useLocationField('page', {
    type: 'number',
    initial: 1,
    hideIfInitial: true
  });
  const [limit, setLimit] = useLocationField('limit', {
    type: 'number',
    initial: 20,
    hideIfInitial: true
  });
  const [type] = useLocationField('type');

  return ...;
}

const Controls = () => {
  const [type, setType] = useLocationField('type');
 //     type  setType
  return ...;
}


ご覧のとおり、ページフィールドと制限フィールドには、次のオプションを含むオブジェクトを使用しました。



  • type — ( , )
  • initial — ,
  • hideIfInitial — : , (.. ), ,




フィールドとその値をカスタマイズするために、他のフィールドがあります。たとえば、値の解析が不可能な場合のコールバック（新しい値を返す）（文字列は渡されましたが、数値/ブール値が必要でした）。これらのフィールドはすべて、npmパッケージページのREADMEまたはgithubで確認できます。また、



存在するフックの簡単な説明もあります。



  • useLocationField-厳密に1つの値を操作するためのフック
  • useLocationQuery-マルチ-値フック
  • useLocationQueryExtend-データが標準の範囲外にある多くの値を操作するためのフック（jsonなど）
  • useLocationClear-開始するためのフック。ルートコンポーネントに配置する必要があります（これがないと、フィールドはクリアされません）。または、上記のフックがすでにいくつかある場合は、配置する必要はありません。


また、フックに加えて、フックのラッパーであるHOCコンポーネントがあります。



フッター



この記事は、このパッケージの存在を他の人に通知するために書かれました。このパッケージに少なくとも少しの生存権があるのか​​、それとも完全に不要なのかというフィードバックと情報を待っている間、そこに実装したいトリック（たとえば、enum value）は他にもたくさんあります。


More articles:


All Articles