se que estoy haciendo algo mal, primero antes de nada gracias, segundo no me da error, he probado varias formas y aún sigo sin saber cómo solucionarlo.
Tengo un contexto donde realizó un Fetch al backend
const getPopulations = async (parent_code) => {
console.log("El parent code que recibo es", parent_code);
const response = await fetch(http://192.168.1.141:3001/api/locations/populations/${parent_code});
const result = await response.json();
setDataPopulations(result);
};
useEffect(() => {
getPopulations();
}, []);
const data = { dataProvinces, getPopulations };
return return <PopulationsContext.Provider value={data}>{children}</PopulationsContext.Provider>;
Esto es parte del código, la idea recibir desde el cliente un código y al elegir una provincia que se realiza con un onChange en un select, ejecutó la función que está en el contexto que se llama getPopulations y me devuelve las poblaciones de la provincias
Import el contexto desde un hook
import usePopulation from "../hooks/usePopulations";
Desestructuro
const { dataProvinces, getPopulations } = usePopulation();
Este es el select
<select
className={block appearance-none w-full ${
editMode ? "bg-whiteb" : "bg-gray-200"
} border border-gray-200 text-gray-700 py-3 px-4 pr-8 rounded leading-tight focus:outline-none focus:bg-white focus:border-gray-500}
id="grid-state"
onChange={(e) => handleOnChangeSelect(e)}
>
{isDataProvinces.map(({ label, code }) => {
return (
<option key={code} value={code}>
{label}
</option>
);
})}
</select>
Y esta es la función que ejecuta el onChage
const handleOnChangeSelect = async (e) => {
e.preventDefault();
const parent_code = e.target.value;
getPopulations(parent_code);
};
Funciona me devuelve las poblaciones
Pero hay un problema que cuando se ejecuta getPopulations hace un renderizado de los inputs si modifico algún input del form este se me renderiza al valor inicial, entonces he hecho mis pruebas si yo no llamo a la función getPopulations en el onChange del select no renderiza, y todo bien, pero no sé ejecuta la función.
Entonces el problema está en el contexto al realizar el Fetch.
Alguna idea 💡💡💡
Si necesitan más info ℹ️
https://github.com/lopuma/salepointify/blob/master/client/src/app/settings/page.jsx