Obtengo datos de firebase firestore. Devuelve "filtro no es función y error". Creo que es un problema porque primero ejecuta la función LoadBooks y luego trae datos de firestore. ¿Cómo puedo arreglarlo? ¿Asíncrono? No puedo escribirlo correctamente o no sé, simplemente no puedo hacerlo, necesito ayuda, por favor.
* aquí no hay error si obtengo los mismos datos del archivo JSON.
**// Fetch Book to Home Page List** const [list, setList] = useState(); useEffect(() => { const data = onSnapshot(collection(db, "Books"), (snapshot) => { setList(snapshot.docs.map((doc) => doc.data())); }); return data; }, []); **//search** const [search, setSearch] = useState(""); **//Category filter** const [filter, setFilter] = useState("all"); function LoadBooks() { // search const book = list.filter((val) => { if (search === "") { return val; } else if (val.title.toLowerCase().includes(search.toLowerCase())) { return val; } }) // filter and map .map((item) => { if (item.category === filter) { return ( <Book key={item.id} {...item} /> ); } else if (filter === "all") { return ( <Book key={item.id} {...item} /> ); } }) return book; } const book = LoadBooks();Te guste o no, una operación en la que obtienes datos de un servidor o servicio externo será asíncrona. Lo que sospecho que está sucediendo aquí es que está llamando a firebase, recibe una promesa de javascript que no está esperando para resolver y luego realiza un .map en una Promise no resuelta.
Le recomiendo que busque async await y Promises :)
Su función LoadBooks depende del estado de la list , por lo que debe ejecutarse en un controlador useEffect y declarar esa dependencia . Algo como esto:
useEffect(() => { if (list != null) { const book = LoadBooks(); } }, [list]);