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 :/
Creo que debido al hecho de que su entrada está dentro de un estado en App.js, cada vez que la cambia, la página se vuelve a representar.
Intenta mover esta línea a la barra de navegación:
const [input, setInput] = useState('')Alternativamente, puede usar tempInput en su barra de navegación y enviar tempInput a su App.js con setInput una vez que maneje el envío.
Así que en tu barra de navegación tendrás:
const [tempInput, setTempInput] = useState('')Y cuando maneje al estado original, debe proporcionar:
setInput(tempInput)No estoy seguro, pero creo que eliminar el [handleSubmit] del efecto de uso solucionará el problema.
useEffect(() => { axios.get(`www.recipeAPI/${input}`) .then(res => //render recipes with res) });