Question

首先，我是这个表格的新手，所以如果我忘记了重要信息，请随时告诉我。我想知道如何从我的 React Web 应用程序上显示的 Firestore 数据库中获取数据，实际上，我无法在站点的控制台上显示数据，但我真的找不到将它们显示在我的站点上的方法.

function App() {
  const TITLE = '~Siting on Clouds~'
  console.log("Start");

    const list_div = document.createElement("P");
    db.collection('Capteur').onSnapshot(function (querySnapshot) {
      querySnapshot.forEach( doc => {
        console.log("Nom : ", doc.data().Nom);
        console.log("Valeur : ", doc.data().Valeur);
        list_div.innerHTML = '<div className="App"><p>Name :' + doc.data().Nom + '<br>Valeur : '+ doc.data().Valeur + '</brW></p></div>'
      })
    })

  return (
    <div className="App">
      <header className="App-header">{TITLE}
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Information that I want
        </p>
      </header>
    </div>
  );
}

有我在控制台中显示的信息的站点 my web page WIP

有关信息，我在 IntelliJ 上使用 React

Answer 1

感谢@Girgetto，我设法将信息从数据库发布到网站，如果有用，这里是“最终”代码

function App() {
  const TITLE = '~Siting on Clouds~'

  const [dataToShow, setData] = useState([]);

    db.collection('Capteur').onSnapshot(function (querySnapshot) {
      const data= [];
      querySnapshot.forEach( doc => {
        console.log("Nom : ", doc.data().Nom);
        console.log("Valeur : ", doc.data().Valeur);
        data.push({name : doc.data().Nom, value: doc.data().Valeur})
      })
      setData(data);
    })

  return (
    <div className="App">
      <header className="App-header">{TITLE}
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {dataToShow.map(data => ('Name : ' + data.name + ' Valeur : ' + data.value + ''))}
        </p>
      </header>
    </div>
  );
}

Answer 2

我要做的是使用 useState 来呈现我需要的信息，如下所示：

import { useState } from 'react'; // first import useState

function App() {
  const TITLE = '~Siting on Clouds~'
  console.log("Start");

  const [dataToShow, setData] = useState([]); // initialize it

    db.collection('Capteur').onSnapshot(function (querySnapshot) {
      const data = [];
      querySnapshot.forEach( doc => {
       data.push({ name: doc.data().Nom, value: doc.data().Valeur })
      })
      setData(data);
    })

  return (
    <div className="App">
      <header className="App-header">{TITLE}
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          {dataToShow.map(capteur => (<p>Name :' + capteur.name + '<br>Valeur : '+ capteur.value + '</brW></p>))}
        </p>
      </header>
    </div>
  );
}

Answer 3

这就是我要做的：

import { useState, useEffect } from "react"; // import useEffect and useState hooks from react

function App() {
  const [dataToShow, setData] = useState([]);
  // Fetch the data from firebase when the commponent is mounted
  useEffect(() => {
    const unsubscribe = db
      .collection("Capteur")
      .onSnapshot(function (querySnapshot) {
        setData(
          querySnapshot.docs.map((doc) => ({ id: doc?.id, data: doc?.data }))
        );
      });
    // Cleanup function
    return () => unsubscribe();
  }, []);

  return (
    <div>
      {dataToShow.map((show, index) => {
        return (
          <div className="App" key={index}>
            <p>Name : {show?.data?.Nom} </p>
            <p>Valeur : + {show?.data?.Valeur}</p>
          </div>
        );
      })}
    </div>
  );
}

export default App;

如何在 React Web 应用程序中显示来自 Firestore 的数据

3 个答案: