Estoy tratando de extraer algunas filas de Cosmos DB y luego mapearlas para mostrar un componente para cada una. Toda la documentación que puedo encontrar para la API de Azure Cosmos DB registra las filas en la consola una por una, pero no puedo encontrar una y luego le indica cómo devolver la cadena completa.
Soy nuevo en esto, así que probablemente lo esté haciendo terriblemente mal, pero ahora estoy atascado y no puedo seguir adelante. Espero que puedas ayudar...
En mi App.js tengo esto
function App() { const [newMembers, setNewMembers] = useState(dataFetch());En mi dataFetch.js tengo
export default async function dataFetch() { const { endpoint, key, databaseId, containerId } = config; const client = new CosmosClient({ endpoint, key }); const database = client.database(databaseId); const container = database.container(containerId); // Make sure Tasks database is already setup. If not, create it. // await dbContext.create(client, databaseId, containerId); try { console.log(`Querying container: Items`); // query to return all items const querySpec = { query: "SELECT * from c", }; // read all items in the Items container const { resources: items } = await container.items .query(querySpec) .fetchAll(); return items; } catch (err) { console.log(err.message); } }Cuando consola.log el resultado de nuevo dice
Promise {<pending>} [[Prototype]]: Promise [[PromiseState]]: "fulfilled" [[PromiseResult]]: Array(3) 0: {id: '154', forename: 'Fred', surname: 'Robson', address1: 'Some address', address2: 'Kingsmead', …} 1: {id: '416', forename: 'Lee', surname: 'Robson', address1: 'Some address', address2: 'Kingsmead', …} 2: {id: '900', forename: 'Kathryn', surname: 'Robson', address1: 'Some address', address2: 'Kingsmead', …} length: 3 [[Prototype]]: Array(0)Vi algo en otra parte sobre el uso de .then, pero cuando lo intenté
const { resources: items } = await container.items .query(querySpec) .fetchAll() .then(() => { return items; });Dijo "dataFetch.js: 33 No se puede acceder a 'elementos' antes de la inicialización"
Lo que estás haciendo en los primeros dos bloques de código está perfectamente bien. Sin embargo, al poner el resultado de dataFetch() en el estado newMembers , solo está almacenando la promesa allí, que se resuelve en algún momento y puede recuperar los resultados en cualquier momento con newMembers.then(actualResult => ...) .
Sin embargo, creo que preferiría mantener la matriz de miembros real en el estado newMembers . Esto se puede hacer por ejemplo:
function App() { const [newMembers, setNewMembers] = useState([]); // initially set to an empty array useEffect(() => { dataFetch().then(members => setMembers(members)); }, []); // providing an empty array means: run this effect only once when this component is created. // do something with the newMembers. Initially, it will be [] // but as soon as the data is retrieved from the DB, the actual data will be // in the state and the component will be rerendered. }