Estoy creando una página de búsqueda de recetas con React. Hay dos componentes: Navbar y Home. La barra de navegación toma la consulta de búsqueda y Home presenta los datos.
La llamada API funciona bien y las recetas se procesan según sea necesario. El problema que tengo es que cada vez que el usuario escribe algo en la barra de búsqueda, mi llamada de búsqueda se dispara, pero necesito que la solicitud se active solo cuando se presiona el botón Enviar.
Aquí está el código: (estoy usando App.js como intermediario entre los dos componentes porque son hermanos)
barra de navegación
function Navbar({ setInput, handleSubmit }) { return ( // Step 1 - User inputs query <form onSubmit={handleSubmit}> <input onChange={(e) => setInput(e.target.value)} /> <button type="submit">SUBMIT</button> </form> ) }APLICACIÓN.JS
function App() { const [input, setInput] = useState('') const handleSubmit = (e) => { e.preventDefault() navigate('/home') }; return ( // Step 2 - App handles exchange <Navbar setInput={setInput} handleSubmit={handleSubmit} /> <Home input={input} handleSubmit={handleSubmit} /> ) }HOGAR
function Home({ input, handleSubmit }) { useEffect(() => { axios.get(`www.recipeAPI/${input}`) .then(res => //render recipes with res) }, [handleSubmit]); return ( // Step 3 - fetch call data gets rendered ) }He probado todo tipo de ganchos y oyentes, pero nada parece impedir que la API llame cada vez que un usuario escribe.
Agradezco la ayuda de antemano :/
Cada vez que se vuelve a representar la App , indicando el estado de input , por ejemplo, se vuelve a crear la función handleSubmit . Dado que la función handleSubmit es una dependencia de useEffect en home, reacciona al cambio y se emite una llamada.
Para evitar que envuelva handleSubmit conuseCallback , lo que memorizaría la función y evitaría generar una nueva función en cada nueva representación.
function App() { const [input, setInput] = useState('') const handleSubmit = useCallback((e) => { e.preventDefault() navigate('/home') }, []); return ( // Step 2 - App handles exchange <Navbar setInput={setInput} handleSubmit={handleSubmit} /> <Home input={input} handleSubmit={handleSubmit} /> ) }Lo que terminé haciendo fue mover toda la llamada de búsqueda a App.js y pasar los resultados a casa. Eso resolvió el problema