Necesito recuperar datos de mi API cuando cambio el valor en mi componente selector. Entonces, lo que hice fue crear una función para obtener mis datos y la llamé en mi selector 'onChange'. Ahora mi problema es que en mi función de búsqueda uso una variable que configuré justo antes de llamarla. Y cuando cambio el valor del selector por primera vez, mi variable useState no está configurada (o mi aplicación no la detecta) y cuando cambio el valor por segunda vez, finalmente funciona. ¿Cómo puedo resolver eso?
Componente selector:
<Select labelId="demo-statut-label" id="demo-statut" defaultValue={""} value={projetName} onChange={handleSelectProjectChange} input={<OutlinedInput label="Projet"/>} MenuProps={MenuProps} > {projets.map((projet) => ( <MenuItem value={projet} > {projet.nom} </MenuItem> ))} </Select>Función onChange:
const handleSelectProjectChange = (event) => { setProjetName(event.target.value); getClientByProject(); };Función de búsqueda:
function getClientByProject() { axios .get(API_URL_CLIENT_BY_ACTIVITE + projetName.id) .then((response) => { if(response.status === 200) { setClient(response.data); console.log('Response : ', response.data); } }) .catch((error) => { console.log(error); }) }estado de uso:
const tab = projets !== null && projets !== undefined && projets.length > 0 ? projets[0] : {} const [projetName, setProjetName] = useState(tab);Hay un gancho en reaccionar llamado useContext, debe intentar usarlo, eliminará todas las instancias futuras de "el estado aún no se ha actualizado". Mientras tanto, la solución más rápida para sus problemas actuales es esta...
onChangeFunction
const handleSelectProjectChange = (event) => { setProjetName(event.target.value); getClientByProject(e.target.value); };FetchFunction
function getClientByProject(project) { axios .get(API_URL_CLIENT_BY_ACTIVITE + projetName.id) .then((response) => { if(response.status === 200) { setClient(response.data); console.log('Response : ', response.data); } }) .catch((error) => { console.log(error); }) }Explicación: acabo de pasar los datos como argumento a la función, lo que garantiza que la función siempre tenga los datos actuales.