🖖 🕺 👨‍⚕️ Travailler avec une chaîne de requête dans React 💋 🙆🏾 📍

Hey. Voici l'article sur le package que j'ai manqué en travaillant avec react.

Pour être plus précis, sur un package pour améliorer et faciliter le travail avec les requêtes de la barre de recherche.

Comment faites-vous maintenant

Récupération des valeurs

Comment obtenez-vous la valeur de la chaîne de requête? Je pense quelque chose comme ça:

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

ou si vous êtes familier avec URLSearchParams, vous pouvez le faire comme ceci:

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

Quelle option est la plus préférable n'est pas tout à fait claire, car le premier extrait le package npm, mais fonctionne partout, et le second est intégré au navigateur, mais il peut y avoir des problèmes avec IE ( mozilla ).

Valeurs de réglage

Nous l'avons réglé, d'une manière ou d'une autre, mais nous avons toujours obtenu exactement le même résultat que nous le souhaitions. Passons à la définition des valeurs. Tout cela est fait en utilisant history.push, qui prend une chaîne avec des paramètres déjà ajoutés. Par exemple comme ceci:

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

Pour des constructions plus complexes, vous devrez utiliser une chaîne de requête:

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

ou URLSearchParams:

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

Effets

D'accord. Malgré le fait que nous recevons toujours des données de chaîne (et nous devons les analyser), il y a aussi un problème si nous attendons un chiffre, mais un mot vient (l'utilisateur n'est pas interdit de changer la requête dans la chaîne), nous devrons clôturer les vérifications et pousser la valeur toi même.

La plupart des problèmes surviennent lorsqu'il est nécessaire que les champs de demande dépendent des composants qui sont maintenant affichés, maintenant chaque composant fonctionnera avec un état global et le changera à votre discrétion, en vous basant sur la valeur déjà existante, vous devrez ajouter non seulement vos propres valeurs à ajouter , et aussi tout le reste à ajuster, quelque chose comme ceci:

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

Bien sûr, vous allez très probablement déplacer cela dans une fonction, et il sera déjà plus pratique de travailler avec. Mais alors vous devrez clôturer les fonctions pour lire les valeurs, vérifier les valeurs, gérer d'une manière ou d'une autre les erreurs associées aux valeurs passées et même les pousser à nouveau, sinon nous avons changé la valeur pour nous-mêmes et laissé la chaîne la même.

Vous devez également effacer la valeur après vous-même plus tard, bien sûr, history.push le fera pour vous, mais il est beaucoup plus facile de ne pas s'en soucier et de laisser les autres le faire à votre place.

D'accord. Qu'est-ce que je suggère?

Je pense que je l'ai fait pour vous, et d'une manière plus pratique. Ensuite, nous parlerons du package npm react

-location-query , qui mérite peut-être votre attention.

Le package implémente des hooks et des composants HOC (juste un wrapper sur les hooks) pour définir les règles de fonctionnement des paramètres dans la barre de recherche, où nous définissons la valeur dans l'un des composants, ou nous pouvons l'obtenir dans n'importe quel autre composant (encore plus haut dans l'arborescence, mais vous ne devriez pas le faire) ).

Exemple

Par exemple, il existe une page UsersPage avec les composants UsersList et Controls. UsersList permet de charger et d'afficher une liste d'utilisateurs, et Controls est de définir le filtrage des utilisateurs. Tout peut être représenté comme ceci:

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 ...;
}

Comme nous pouvons le voir, pour les champs page et limite, nous avons utilisé un objet avec les options suivantes:

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

Pour personnaliser le champ et sa valeur, il existe d'autres champs, par exemple, un callback (qui retourne une nouvelle valeur) en cas d'analyse impossible de la valeur (une chaîne a été passée, mais un nombre / valeur booléenne était attendu). Tous ces champs sont visibles dans le README sur la page du package npm ou sur github ainsi qu'une

petite description des hooks présents:

useLocationField - crochet pour travailler avec strictement une valeur
useLocationQuery - hook à valeurs multiples
useLocationQueryExtend - un hook pour travailler avec de nombreuses valeurs dont les données sortent du champ d'application des normes (par exemple json )
useLocationClear - un hook pour commencer, vous devez le mettre dans le composant racine (sans lui, les champs ne seront pas effacés), ou vous n'avez pas besoin de le poser s'il y a déjà certains des hooks décrits ci-dessus

De plus, en plus des crochets, il existe des composants HOC qui sont leurs enveloppes pour les crochets.

Bas de page

Cet article a été rédigé pour informer les autres de la présence de ce package. Il y a beaucoup plus d'astuces que je veux implémenter ici (par exemple, enum value), en attendant des commentaires et des informations pour savoir si ce paquet a au moins un petit droit à la vie ou est complètement inutile.

Travailler avec une chaîne de requête dans React