Estoy tratando de acceder a la consulta de la variable query en mi función dentro de useEffect. Recibo el error React Hook useEffect has a missing dependency: 'query'. Either include it or remove the dependency array.
Creo que el problema es que estoy configurando la variable de consulta (useState) cuando el usuario escribe en la barra de búsqueda y luego intento acceder a esta nueva variable de query en el enlace useEffect.
Quiero obtener la API después de unirme a la URL de la API y el contenido de la consulta, pero después de ejecutar setQuery, que es después de que el usuario escriba en la barra de búsqueda. ¿Cómo puedo hacer esto?
Gracias Heres el código; observe la variable de query .
import React, { useState, useEffect } from "react"; import Grid from '@mui/material/Grid'; import PaperCard from '../components/ResearchPaperCard'; const apiUrl = "http://127.0.0.1:8000/api/search/?search="; function SearchedPapers(){ const [query, setQuery] = useState(""); const [apiData, setApiData] = useState([]) useEffect(() => { const getFilteredItems = async (query) => { let response = await fetch(apiUrl+query); let papers = await response.json(); setApiData(papers); if (!query) { return papers } return papers; } getFilteredItems(query); },[]); console.log(apiData) return ( <div className='SearchedPapers'> <label> Search </label> <input type='text' onChange={e => setQuery(e.target.value)}/> <div> {apiData.map((paper) => { return ( <Grid key={paper.title}> <PaperCard title={paper.title} abstract={paper.abstract}/> </Grid> ) })} </div> </div> ) } export default SearchedPapers;En este momento, su useEffect se activa cada vez que su componente se monta, así que básicamente cuando alguien llega a esta pantalla. En este momento, su estado de consulta está vacío.
Intenta agregar esto:
useEffect(() => { const getFilteredItems = async (query) => { let response = await fetch(apiUrl+query); let papers = await response.json(); setApiData(papers); if (!query) { return papers } return papers; } getFilteredItems(query); },[query]) - - - - > hereAl hacerlo, su useEffect se activará solo y cada vez que cambie el estado de su consulta
Debe incluir la consulta en su matriz de dependencia, es decir, el segundo argumento de su enlace UseEffect o eliminarla. Cuando está (matriz) vacía, useEffect solo se renderizará una vez, es decir, cuando su página se renderice por primera vez, pero cuando se elimine, useEffect se ejecutará después de la primera renderización y después de cada actualización. Cuando se especifica como si pusiera 'consulta' en la matriz de dependencia, solo se ejecutará siempre que haya un cambio en el estado de 'consulta'.