Блог

Я пытаюсь понять, как работает запрос, и я видел этот пример:

 const citiesRef = db.collection('cities');
const snapshot = await citiesRef.where('capital', '==', true).get();
if (snapshot.empty) {
  console.log('No matching documents.');
  return;
}  

snapshot.forEach(doc => {
  console.log(doc.id, '=>', doc.data());
});
 

Проблема в том, что когда я пытаюсь сделать что-то подобное в своем реальном коде, я получаю ошибку компиляции, основанную на ожидании вот печать

и вот мой код

 const librosRef = db.collection('libros');
    const queryRef = librosRef.where('grado', '==', '4° Grado');

    const snapshot = await queryRef.get();
    
    if (snapshot.empty) 
    {
        console.log('No matching documents.');
        return;
    }  
    
    snapshot.forEach(doc => 
    {
        console.log(doc.id, '=>', doc.data());
  });
 

Есть ли способ сделать это без ожидания ? Я не расширяю (может быть проблема) Я просто кодирую простые функции, есть ли для этого какие-то обходные пути ?

Редактировать: Я также пробовал следующее, но это тоже не работает

 //relevant code
useEffect(() => {
        db.collection("libros")
        .orderBy("precio")
        .where('grado', '==', '4° Grado')
        .get()
        .then((snapshot) => {
              const tempData = [];
            snapshot.forEach((doc) => {
              const data = doc.data();
              tempData.push(data);
    
              console.log(doc.data());
              console.log("Temp Data: ", tempData);
            });
            setLibros(tempData);
          });
      }, []);

//relevant code so it makes sense what is printing
<tbody>
                {libros.map((e) => (
                        
                        <tr >
                        <td>

                        <input onChange = {(event) => {
                            let checked = event.target.checked;
                        }} 
                        
                        type="checkbox" checked = "">
                        </input>
                        </td>
                        <td>{e.grado}</td>
                        <td >{e.descripcion}</td>
                        <td >{e.editorial}</td>
                        <td >${parseFloat(e.precio).toFixed(2)}</td>
                        </tr>
                     ))}
                </tbody>
 

Вот что он печатает

И вот как это выглядит в firebase

Вы можете сделать что-то подобное, просто изменив useEffect :

 useEffect(() => {
  (async () => {
    const response = await db.collection("libros")
      .orderBy("precio")
      .where('grado', '==', '4° Grado')
      .get();
    
    const tempData = [];
    response.forEach((doc) => {
      const data = doc.data();
      tempData.push(data);
      
      console.log(doc.data());
      console.log("Temp Data: ", tempData);
    });
    setLibros(tempData);
  })();
}, []);

 

В принципе, мы используем IIFE, useEffect чтобы иметь возможность использовать асинхронность.