Tengo este menú desplegable (hecho con MUI) que permite elegir el valor del día. Cuando cambie, me gustaría que hiciera una nueva solicitud GET con el nuevo parámetro, pero no sé cómo hacerlo ya que usa useEffect.
Mi función para obtener datos
const [loading, setLoading] = useState(true); const [prepData, setPrepData] = useState([]); const [day, setDay] = React.useState(3); console.log(day); const options=["J+1","J+2","J+3", "J+4"] const handleChange = (event) => { setDay(event.target.value); }; useEffect(() => { const fetchData = async () => { setLoading(true); try { const {data: response} = await axios.get('/api/home?day=' + day) setPrepData(response) } catch (err) { console.log(err.message) } setLoading(false) } fetchData() }, []);Mi menú desplegable:
<Box key={'box' + index} sx={{ minWidth: 120 }}> <FormControl key={'form' + index} fullWidth> <InputLabel key={'input' + index} id="dropdown">Date Liv.</InputLabel> <Select key={'select' + index} labelId="select-label" id="dateLiv" value={day} label="Date Liv." onChange={handleChange} type='submit' > {(options).map((option, index) => ( <MenuItem key={'menuItem' + index} value={index + 1}>{option}</MenuItem> ))} </Select> </FormControl> </Box>Añadir como dependencia:
useEffect(() => { const fetchData = async () => { setLoading(true); try { const {data: response} = await axios.get('/api/home?day=' + day) setPrepData(response) } catch (err) { console.log(err.message) } setLoading(false) } fetchData() }, [day]); // ------> herePuede agregar el day como dependencia en useEffect . De modo que cuando se cambie el valor del día, se ejecutará automáticamente useEffect .
useEffect(() => { const fetchData = async () => { setLoading(true); try { const {data: response} = await axios.get('/api/home?day=' + day) setPrepData(response) } catch (err) { console.log(err.message) } setLoading(false) } fetchData() }, [day]); // added day as dependent propertyEl useEffect que definió se activa cuando su componente se monta por primera vez porque usa el parámetro [] al final. Pero puede dar cualquier estado var en lugar de eso.
Si desea actualizar los datos cada vez que cambia el valor del menú desplegable, puede declarar otro efecto de uso que se llama tan pronto como cambia la variable de estado "día". Haz algo como esto:
useEffect(() => { // Action called fetchData(day) }, [day])