¿Cómo puedo otorgar acceso a mi const para que se use dentro de una función? En este caso, quiero acceder a mi const catName dentro de mi función fetchListings . Estoy recibiendo este error:
Pregunta actualizada:
ReferenceError: catName is not defined <script context="module"> const fetchListings = async () => { try { // get reference to listings collection const listingsRef = collection(db, 'listings'); // create a query to get all listings const q = query( listingsRef, where('type', '==', catName), orderBy(timestamp, 'desc'), limit(10) ); // execute query const querySnap = await getDocs(q); let lists = []; querySnap.forEach((doc) => { console.log(doc); }); } catch (error) { console.log(error); } }; fetchListings(); </script> <script> import { page } from '$app/stores'; // export the const catName to the function above export const catName = $page.params.catName; </script> Hi {catName}!El problema con el que te encuentras proviene de cómo funciona el <script context="module"> .
La etiqueta de secuencia de comandos de nivel de módulo sirve como una secuencia de comandos de configuración única por aplicación. Eso significa que se ejecutará solo una vez, cuando se inicialice su aplicación y se ejecutará antes de que se ejecute cualquier código de etiqueta <script> normal. Consulte: https://svelte.dev/docs#component-format-script-context-module
Esto significa que el <script context="module"> no tendrá acceso a lo que se define o crea en el código normal de las etiquetas <script> . Por lo tanto, el error not defined para su constante, que se define en la etiqueta <script> normal.
En base a esto, su código debería ser refactorizado (reorganizado). Tengo entendido que fetchListings en el contexto del módulo porque deseas obtener previamente los resultados y solo hacerlo una vez durante el inicio de tu aplicación.
Para lograr eso, puede refactorizar su código de esta manera:
<script context="module"> let preFetched=false </script> <script> import { page } from '$app/stores'; // export is not needed const catName = $page.params.catName; async function fetchListings() => { // Your code ... } if(!preFetched){ fetchListings() preFetched=true } </script> Hi {catName }! Esto garantiza que la función fetchListings solo se ejecute una vez. El truco es que las variables, constantes, etc. definidas en el contexto del módulo son accesibles para todas las instancias de ese modelo. Entonces, cuando se crea la primera instancia, ejecutará la función fetchListings y establecerá la variable preFetched en falso, por lo que las instancias posteriores no harán eso.
Esta es solo una forma posible de hacerlo. Dependiendo de lo que quiera lograr exactamente, es posible que desee organizar las cosas de manera diferente. Pero con la comprensión de lo que hace <script context="module"> y cuándo se ejecuta, debería poder encontrar su propia solución que mejor se adapte a sus necesidades.