Estoy sacando cosas de mi base de datos usando Firestore. Cuando inicio sesión dentro de la función que extrae los datos, la matriz tiene los datos. Cuando inicio sesión en mi componente principal, también tiene. Pero por alguna razón, .map no funciona, y cuando intento array.length devuelve 0. Estaba usando un mapa, pero luego lo cambié para usar una función para tratar de obtener el error.
export default function Search() { const [searchedData, setSearchedData] = useState([]); const [loading, setLoading] = useState(true); const [noBook, setNoBook] = useState(false); const [showBooks, setShowBooks] = useState(false); const link = useLocation(); useEffect(() => { const srch = link.pathname.substring(8); loadSearchBooks(srch); }, [link]); async function loadSearchBooks(srch) { try { const bookArray = await getSearchedBooks(srch); bookArray ? setShowBooks(true) : setNoBook(true); setSearchedData(bookArray); } catch (e) { setSearchedData(null); } finally { setLoading(false); } } function renderBooks() { console.log(searchedData); const l = searchedData.length; return l; } return ( <div> <Navbar /> <div className={searchBookWrapper}> {loading && 'Carregando'} {showBooks && renderBooks()} {noBook && <BookCardItem />} </div> </div> ); }Al hacer esto, console.log(searchedData) devuelve la matriz, pero const l = searchedData.length muestra solo un 0. Cuando vuelvo a buscar, el número cambia a 12 por un momento justo cuando está a punto de cambiar. Este es el código anterior:
return ( <div> <Navbar /> <div className={searchBookWrapper}> {loading && 'Carregando'} {showBooks && searchedData.map(({ afn, aln, notes, quant, title }, index) => { return ( <BookCardItem key={title} firstName={afn} lastName={aln} notes={notes} quant={quant} title={title} bookNumber={index} /> ); })} {noBook && <BookCardItem />} </div> </div> ); }Lo mismo sucedió. BookInfo apareció solo por un momento cuando volví a buscar.
Desde el primer código en esta pregunta, esta es la consola:
si useLocation es una llamada API u otra función asíncrona, react prefiere que estén en un useEffect. Si no lo son, puede dar resultados inconsistentes. Intenta poner useLocation dentro de useEffect. Si solo planea que useLocation se active una vez (y, por lo tanto, loadSearchedBooks solo se active una vez), incluso puede ponerlos en el mismo useEffect, simplemente no haga que se vuelvan a representar en función de lo que actualicen.
useEffect(() => { useLocation().then(link => { const srch = link.pathname.substring(8); loadSearchBooks(srch); } }, []);Con suerte, esto solucionará su problema.