Tengo este componente funcional -
function ModelPredict({ model }) { const [predictionDate, setPredictionDate] = useState('') const [predictionValue, setPredictionValue] = useState('') const [isLoading, setIsLoading] = useState(false) useEffect(() => { const fetchPrediction = async () => { setIsLoading(true) const res = await fetch(`http://localhost:8000/api/predict/${model.id}/?` + new URLSearchParams({pred_date: predictionDate})) const predictionValue = await res.json() setPredictionValue(predictionValue) setIsLoading(false) } if (predictionDate) fetchPrediction() }, [predictionDate, model]) return ( <div> <label>Select Prediction date: </label> <input type="date" name="date" value={predictionDate} onInput={e => setPredictionDate(e.target.value)} /> <input type="submit" value="Submit"/> {isLoading && <p>Predicting ...</p>} {!isLoading && predictionValue && <p>Prediction: {predictionValue.prediction}</p>} </div > ) } Actualmente, useEffect se activará cada vez que se ingrese la fecha.
Quiero que useEffect se ejecute solo cuando se hace clic en el botón Enviar.
Una forma de hacerlo sería tener otro estado inpReady y llamar a setInpReady(true) dentro de onSubmit y luego verificar dentro de useEffect si inpReady es verdadero antes de llamar a fetchPrediction .
¿Hay una mejor manera?
No sé si estoy entendiendo tu pregunta, pero ¿cuál es la necesidad de useEffect aquí? ¿Cuál es el problema de eliminar todo el código de useEffect y ponerlo todo dentro de su función onSubmit? eso solucionaria tu problema.
Una opción puede ser configurar un indicador isSubmmited y usarlo como una dependencia en useEffect:
const [isSubmmited, setIsSubmitted] = useState(false) Y luego onSubmit para llamar a setIsSubmmited(true)
Otra opción es simplemente dejar que onSubmit maneje la lógica que desea en useEffect