0
161
VistasEstado vacío de Reactjs cuando se carga la página
API: https://developers.themoviedb.org/
const [searchQuery, setSearchQuery] = useState(); const [searchResults, setsearchResults] = useState([]); const getSearchResults = () => { baseService.get(`/search/multi?api_key=${API_KEY}&language=en-US&query=${searchQuery}`) .then(data=>setsearchResults(data.results)) } useEffect(() => { getSearchResults() console.log(searchResults) }, [searchQuery]) return ( <Container> <TextField color="primary" label="Search for anything" size="small" onChange={(e) => setSearchQuery(e.target.value)}/> {searchResults && searchResults.map((search,key) => ( <span key={key}>{search?.title}</span> ))} </Container>baseservice.js es así
import { API_URL } from "./config" export const baseService = { get: async (url) => { let response = []; await fetch(API_URL+url, { }) .then((res) => res.json()) .then((data) => { response = data }) return response; } } 1. La imagen es cuando se carga la página. 
2.Picure es cuando el término de búsqueda de entrada. 
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
En baseService.get , está devolviendo la response antes de que se resuelva la promesa, se puede simplificar a esto:
export const baseService = { get: (url) => { return fetch(API_URL+url) .then((res) => res.json()) } }
·
Juan Pablo Isaza
Denunciar
0
Esto sucede porque está registrando searchResults dentro de un useEffect que tiene una dependencia de searchQuery, por lo que registra la primera vez que se establece el estado y luego no registra cuando cambia de la respuesta de búsqueda. Si desea registrarlo correctamente, debe agregar searchResults como una dependencia.
useEffect(() => { getSearchResults() console.log(searchResults) }, [searchQuery, searchResults])
·
Juan Pablo Isaza
Denunciar
Responde la pregunta