Рендеринг данных из Firebase Firestore в React

Question

, поэтому я пытаюсь отобразить некоторые данные из базы данных Firebase Firestore в своем приложении, я следовал определенному руководству, которое помогло мне начать работу, но теперь, когда я пытаюсь понять, как извлечь данные из моей собственной базы данных , это что-то еще.

Вот мой кодовый блок, который, я думаю, будет прослушивать данные из пожарного хранилища на основе контрольного номера, введенного пользователем, сейчас контрольный номер жестко закодирован, прежде чем я начну вычислять Как получить значение из формы.

//Code to Query data from Database
function SingleQuery() {
  const [drivers, setDrivers] = useState([]);

  useEffect(() => {
    const unsubscribe = firebase
      .firestore()
      .collection("drivers")
      .where("controlNumber", "==", "202003010850-014746") //get data according to control number
      .onSnapshot(snapshot => {
        const newDriver = snapshot.docs.map((doc) =>
          id: doc.id,
          ...doc.data()
        )
        });
        setDrivers(newDriver);
      });

    return () => unsubscribe();
  }, []);

  return drivers;
}

После этого ожидается, что данные будут отображаться здесь:

<div id="results-list">
  {drivers.map((driver) =>
    <ol key={driver.id}>
     <li>{driver.controlNumber}</li>
    </ol>
)}
</div>

Сейчас я получаю смешанные ошибки синтаксического анализа и неожиданные токены.

---

Привет всем, это обновление. Теперь у меня все работает, но мне интересно, может ли кто-нибудь из вас помочь мне с запросом данных из Firestore в соответствии с контрольным номером, введенным пользователем.

<div className="violationQuery">
    <br />
    <br />
    <br />
    <h4>Enter Control Number</h4>
      <div className="searchBar" class="input-group-sm">
        <form>
          <input
           type="text"
           className="form-control"
           aria-label="Small"
           aria-describedby="inputGroup-sizing-sm"
           placeholder="Control Number"
           id="controlNum"
          />
           <br />
         <input className="btn btn-primary" type="submit" value="Submit" />
        </form>
</div>

Мне нужно получить значение введите и поместите его в метод where () в описанном выше хуке SingleQuery.

Answer 1

Проверьте метод вашей карты, синтаксис неверен. Я думаю, что вы пытаетесь создать объект и вернуть его.

//Code to Query data from Database
function SingleQuery() {
  const [drivers, setDrivers] = useState([]);

  useEffect(() => {
    const unsubscribe = firebase
      .firestore()
      .collection("drivers")
      .where("controlNumber", "==", "202003010850-014746") //get data according to control number
      .onSnapshot(snapshot => {
        const newDriver = snapshot.docs.map((doc) => {  
          return {   // returns a new Object
            id: doc.id,
            ...doc.data()
          };
        });
        setDrivers(newDriver);
      });

    return () => unsubscribe();
  }, []);

  return drivers;
}