Javascript 如何在react web应用程序中显示firestore中的数据

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

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

函数应用程序（）{
const TITLE=“~位于云端~”
控制台日志（“启动”）；
const list_div=document.createElement（“P”）；
db.collection（'Capteur'）.onSnapshot（函数（querySnapshot））{
querySnapshot.forEach（doc=>{
log（“Nom:，doc.data（）.Nom”）；
console.log（“Valeur:，doc.data（）.Valeur”）；
list_div.innerHTML='Name:'+doc.data（）.Nom+'
Valeur:'+doc.data（）.Valeur+'
'
})
})
返回(
{TITLE}

我想要的信息

);
}

有一个我的站点，其中包含我在控制台中显示的信息

---

对于我在IntelliJ上使用React的信息

我要做的是使用

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

从“react”导入{useState}；//首次导入使用状态
函数App（）{
const TITLE=“~位于云端~”
控制台日志（“启动”）；
const[dataToShow，setData]=useState（[]）；//初始化它
db.collection（'Capteur'）.onSnapshot（函数（querySnapshot））{
常量数据=[]；
querySnapshot.forEach（doc=>{
data.push（{name:doc.data（）.Nom，value:doc.data（）.Valeur}）
})
setData（数据）；
})
返回(
{TITLE}

{dataToShow.map（capteur=>（Name:'+capteur.Name+'
Valeur:'+capteur.value+'
）}

);
}

多亏了@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>
  );
}

函数应用程序（）{
const TITLE=“~位于云端~”
const[dataToShow，setData]=useState（[]）；
db.collection（'Capteur'）.onSnapshot（函数（querySnapshot））{
常量数据=[]；
querySnapshot.forEach（doc=>{
log（“Nom:，doc.data（）.Nom”）；
console.log（“Valeur:，doc.data（）.Valeur”）；
data.push（{name:doc.data（）.Nom，value:doc.data（）.Valeur}）
})
setData（数据）；
})
返回(
{TITLE}

{dataToShow.map（data=>（'Name:'+data.Name+'Valeur:'+data.value+''）}

);
}

我将这样做：

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”导入{useState，useffect}；//从react导入useEffect和useState挂钩
函数App（）{
const[dataToShow，setData]=useState（[]）；
//挂载组件时从firebase获取数据
useffect（（）=>{
const unsubscribe=db
.收集（“捕获者”）
.onSnapshot（函数（querySnapshot）{
设置数据(
querySnapshot.docs.map（（doc）=>（{id:doc？.id，data:doc？.data}））
);
});
//清理功能
return（）=>unsubscribe（）；
}, []);
返回(
{dataToShow.map（（显示，索引）=>{
返回(
名称：{show？.data？.Nom}

Valeur:+{show？.data？.Valeur}

);
})}
);
}
导出默认应用程序；

感谢anwser@Girgetto，我已经尝试按照您的建议做了，但我有一些问题：我是否应该在db.collection请求之外创建一个const（如const Capteur=“”；），以便使用tes.push和setData（test）？我应该向{/*显示数据*/}添加什么？最后，在修改代码并执行之后，似乎出现了一个类型错误，比如Capteur.push不是一个函数。很抱歉问了这么多问题，但我想确保我没有遗漏任何内容。是的，你是对的，正如这里建议的那样，你需要将日期存储在常量变量中以避免类型错误，不需要显示数据注释。我明白了，所以我已经将其和“.foreach”改为“.map”，我有一个错误告诉我“querySnapshot.map不是一个函数”，所以我尝试返回“.foreach”，但这次是“dataToShow.map”向我显示“无法读取未定义的属性‘map’”“。可能是因为当执行

setData

时，添加到状态的值是

undefined

，我已经用

forEach

编辑了代码，并且一个const数组变量将接收要显示的数据，如果对象执行此操作，则还应该修改渲染函数。”