在 React 中渲染来自 Firebase Firestore 的数据

Question

所以我试图在我的应用程序中从 Firebase Firestore 数据库中呈现一些数据，我遵循了某个让我启动并运行的教程，但现在我正试图弄清楚如何从我自己的数据库中提取数据，那是另一回事。

这是我的代码块，我认为它将根据用户输入的控制号从 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>

我需要获取input的值，放到上面SingleQuery Hook中的where()方法中。

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;
}