🚾 🙎🏾 ⬅️ Trabajando con una cadena de consulta en React 👲🏾 👩‍🎓 🛃

Oye. Este es el artículo sobre el paquete que me perdí al trabajar con react.

imagen

Para ser más específicos, sobre un paquete para mejorar y facilitar el trabajo con consultas desde la barra de búsqueda.

Como lo haces ahora

Recuperando valores

¿Cómo se obtiene el valor de la cadena de consulta? Pienso algo como esto:

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

o si está familiarizado con URLSearchParams, puede hacerlo así:

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

No está del todo claro qué opción es más preferible, ya que el primero abre el paquete npm, pero funciona en todas partes, y el segundo está integrado en el navegador, pero puede haber problemas con IE ( mozilla ).

Establecer valores

Lo solucionamos, de alguna manera, pero aún obtuvimos exactamente el mismo resultado que queríamos. Pasemos a establecer valores. Todo esto se hace usando history.push, que toma una cadena con parámetros ya agregados. Por ejemplo así:

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

Para construcciones más complejas, necesitará usar una cadena de consulta:

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

o URLSearchParams:

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

Efectos

Bueno. A pesar del hecho de que siempre recibimos datos de cadena (y tenemos que analizarlos), también hay un problema si esperamos un dígito y llega una palabra (el usuario no tiene prohibido cambiar la consulta en la cadena), tendremos que vallar las verificaciones y presionar el valor usted mismo.

La mayor parte del dolor viene cuando es necesario que los campos de solicitud dependan de los componentes que ahora se muestran, ahora cada componente funcionará con un estado global y lo cambiará a su discreción, confiando en el valor ya existente, tendrá que agregar no solo sus propios valores para agregar , y también todo el resto a ajustar, algo como esto:

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

Por supuesto, lo más probable es que mueva esto a una función, y ya será más conveniente trabajar con ella. Pero luego tendrá que limitar las funciones para leer valores, verificar valores, manejar de alguna manera los errores asociados con los valores pasados e incluso presionarlos nuevamente; de lo contrario, cambiamos el valor por nosotros mismos y dejamos la cadena igual.

También necesitas borrar el valor después de ti mismo más tarde, por supuesto que history.push lo hará por ti, pero es mucho más fácil no molestarse y dejar que otros lo hagan en tu lugar.

Bueno. ¿Qué estoy sugiriendo?

Creo que lo hice por ti y de una manera más conveniente. A continuación, hablaremos sobre el paquete npm

react-location-query , que puede valer su atención.

El paquete implementa ganchos y componentes HOC (solo un envoltorio sobre los ganchos) para establecer las reglas de cómo funcionan los parámetros en la barra de búsqueda, donde establecemos el valor en uno de los componentes, o podemos obtenerlo en cualquier otro componente (incluso más arriba en el árbol, pero no debería hacer eso) ).

Ejemplo

Por ejemplo, hay una página UsersPage con los componentes UsersList y Controls. UsersList es para cargar y mostrar una lista de usuarios, y Controls es para configurar el filtrado de usuarios. Todo se puede representar así:

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

Como podemos ver, para los campos de página y límite, usamos un objeto con las siguientes opciones:

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

Para personalizar el campo y su valor, hay otros campos, por ejemplo, una devolución de llamada (que devuelve un nuevo valor) en caso de que no se pueda analizar el valor (se pasó una cadena, pero se esperaba un número / valor booleano). Todos estos campos se pueden ver en el archivo README en la página del paquete npm o en github. También una

pequeña descripción de los ganchos presentes:

useLocationField - gancho para trabajar estrictamente con un valor
useLocationQuery - gancho de valores múltiples
useLocationQueryExtend : un gancho para trabajar con muchos valores cuyos datos están fuera del alcance de los estándares (por ejemplo, json )
useLocationClear : un gancho para comenzar, debe colocarlo en el componente raíz (sin él, los campos no se borrarán), o no es necesario que lo coloque si ya existen algunos de los ganchos descritos anteriormente

Además de los ganchos, también hay componentes HOC que son sus envoltorios para los ganchos.

Pie de página

Este artículo fue escrito con el fin de notificar a otros sobre la presencia de este paquete. Hay muchos más trucos que quiero implementar allí (por ejemplo, valor de enumeración), mientras espero comentarios e información sobre si este paquete tiene al menos un pequeño derecho a la vida o es completamente innecesario.

Trabajando con una cadena de consulta en React