Hola, toda esta pregunta es un poco menos de código y más lógica.
Estoy creando una aplicación donde puedo filtrar a través de diferentes tipos de trabajo y obtener información sobre cada rol. Aunque tengo la información en una base de datos, me gustaría que un usuario ingrese, la busque y la filtre, casi como Glassdoor.
por ejemplo, la entrada del usuario es el campo "Ingeniero de software" en un campo de búsqueda, ¿cuál es la mejor manera de manejar esta solicitud?
{ "title": "Ingeniero de software", "desc": "Únase a nuestro equipo de vuelos de ingeniería de software, que administra la integración de API y la agregación de contenido de aerolíneas dentro del sitio web. Trabajará en estrecha colaboración con nuestros propietarios de productos, gerentes y UX equipos para facilitar las ventas y la comercialización de aerolíneas nacionales e internacionales, utilizando API de distribución de última generación"., "compañía": "Robert Half", "ubicación": "Melbourne", "tareas": ["Agile: Experiencia comercial en un entorno ágil con al menos .Net y otros lenguajes, pero más importante un fuerte deseo de aprender y desarrollarse en más de uno”, “ Puede brindar soluciones simples a problemas complejos: Escribiendo código comprobable, efectivo y comunicativo”, “ Mentalidad de crecimiento: es curioso y apasionado por su trabajo y disfruta aprendiendo cosas nuevas", "No es solo un programador: está interesado en el contexto comercial general y en crear excelentes experiencias de usuario", "Experiencia en Docker y sistemas de orquestación de Docker (K8S, DC/OS, etc.)"], "habilidades": ["Re acto", "Angular", "AWS", "GCP", "Azure"], "salario": "96000", "estilo": "Tiempo completo", "estado": "verdadero" }
Realmente no estoy seguro de cuál es la mejor manera de conectar esta funcionalidad a mi llamada de back-end. Establecí y construí una API para crear/obtener información sobre estos roles, ¡pero no estoy seguro de cómo conectarla!
Estoy usando la pila MERN aquí, y tengo bien establecidas mis estructuras de carpetas. Todo parece funcionar simplemente inseguro.
En este momento tengo un componente como este:
const InitialSearch_INPUT = () => { return ( <LeftContainer> <InteriorLeftContainer> <Typography variant="h4" color="primary">Let's start searching</Typography> </InteriorLeftContainer> <InteriorLeftSearchContainer> <InteriorLeftSearchBar> <SearchBar placeholder="Roles..." autoFocus cancelOnEscape /> </InteriorLeftSearchBar> </InteriorLeftSearchContainer> </LeftContainer> ); } export default InitialSearch_INPUTPor favor hagamelo saber.
Consulte la publicación de mi blog sobre cómo conectar su aplicación React a su backend: https://schneider-lukas.com/blog/react-connect-rest-api . Eso debería ayudarte a empezar.
Además, para trabajar con formularios, recomiendo encarecidamente la biblioteca react-hook-form : https://react-hook-form.com/ . Con esta biblioteca, puede obtener información del usuario que luego puede seguir procesando utilizando sus servicios de API.
Cuando se trata de buscar, uno de los mejores enfoques sería tener un evento onChange en su entrada y desencadenar una llamada a la API, pero no queremos enviar demasiadas solicitudes (dañaría el tiempo de respuesta del servidor), por lo que debemos usar Debouce . lo que realmente hace es asegurarse de que Clinet haya escrito el texto deseado y después de un tiempo definido (500 ms por ejemplo) comenzará la búsqueda.
Dicho esto, eche un vistazo al ejemplo a continuación.
export const debounce = (func, delay) => { let debounceTimer; return function () { const context = this; const args = arguments; clearTimeout(debounceTimer); debounceTimer = setTimeout(() => func.apply(context, args), delay); }; }; const doSearch = debounce(function (value) { setState({...state,page:0,queryStrings:value}); }, DebounceTime);considerando tener esta entrada
<Input placeholder="search" value={search[headCell.id]} onChange={(e)=>{doSearch(headCell.id,e)}} inputProps={{ 'aria-label': 'description' }} />Espero que entiendas el punto .