He escrito un enlace para un formulario Formik que estoy creando para que en un campo específico, cada vez que se seleccione una opción de Selección, quiero que se llame al enlace.
Pero lo que está pasando, es que en cada campo de formulario, en cada pulsación de tecla, mi gancho está siendo llamado. No estoy seguro de lo que estoy haciendo mal, pero me encantaría cualquier sugerencia sobre lo que puedo hacer para llamar solo al gancho en el cambio de selección.
Aquí está mi displayProvinces.js
import React from 'react'; import GetDistrictsAPI from '@/utils/services/GetDistrictsAPI'; import GetProvincesAPI from '@/utils/services/GetProvincesAPI'; import {Field, useFormikContext } from 'formik'; export default function DisplayProvinces(){ const [ provinces ] = GetProvincesAPI(); const handleSelectedProvince = useProvinces(); function useProvinces(){ console.log('Fired') function handleSelectedProvince(pr) { console.log('Selected Province = ' +pr) let districts = GetDistrictsAPI(pr); } return handleSelectedProvince; } const {setFieldValue} = useFormikContext(); return ( <Field as="select" id="pxProvince" name="pxProvince" onChange={(e)=> { handleSelectedProvince(e.target.value) setFieldValue('pxProvince', e.target.value) }} className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" > {!provinces ? provinces : provinces.map((p, i) => ( <option key={i} value={p.prov_id}>{p.prov_name}</option> ))} </Field> ) } En este fragmento de código, puedo ver 'Despedido' en la consola, para cada pulsación de tecla, aunque se supone que solo debe llamarse desde el evento select onChange asociado.
¡De antemano, gracias por cualquier consejo!
Y así es como estoy llamando al componente
<div className="col-span-6 sm:col-span-6 lg:col-span-2"> <CVLabel field="forms.rego.fields.px.province" required='1' /> <DisplayProvinces /> </div>Creo que sucede porque se produce la re-renderización. Cada vez que su componente DisplayProvinces se vuelva a renderizar, llamará a la función useProvinces() que registrará Fired . Intente usar el gancho useMemo para evitar que su función se reinicie cada renderizado de componente.
const handleSelectedProvince = useMemo(() => useProvinces(), []); Guardará los resultados de useProvinces (que es una función handleSelectedProvince ) incluso el componente se vuelve a renderizar. Más información sobre useMemo aquí
En cada evento onChange, está configurando el estado (setFieldValue) que desencadena la reacción para volver a evaluar y volver a renderizar el componente. A medida que ocurre la reevaluación, reacciona nuevamente y ejecuta el método useProvinces () que registra "Fired" en la consola y devuelve la referencia handleSelectedProvince.
Hay dos formas de resolver su problema, ya sea usar ganchos useMemo() que memorizan el valor devuelto por la función pasada y recalculan el valor cuando cambia cualquier dependencia.
O puede modificar el código de esta manera:
import React from 'react'; import GetDistrictsAPI from '@/utils/services/GetDistrictsAPI'; import GetProvincesAPI from '@/utils/services/GetProvincesAPI'; import {Field, useFormikContext } from 'formik'; export default function DisplayProvinces(){ const [ provinces ] = GetProvincesAPI(); function handleSelectedProvince(pr) { console.log("Fired!!") console.log('Selected Province = ' +pr) let districts = GetDistrictsAPI(pr); } const {setFieldValue} = useFormikContext(); return ( <Field as="select" id="pxProvince" name="pxProvince" onChange={(e)=> { handleSelectedProvince(e.target.value) setFieldValue('pxProvince', e.target.value) }} className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md" > {!provinces ? provinces : provinces.map((p, i) => ( <option key={i} value={p.prov_id}>{p.prov_name}</option> ))} </Field> ) }