在Firebase和React上導航的按鈕陣列？

我想在這里做的是：

- 在我的 Cloud Firestore 中獲取我收藏中的所有檔案 - 將它們放在按鈕陣列中 - 讓每個按鈕導航 onPress 特別是來自該按鈕的資訊，因為我需要它用于它導航到的螢屏

我以前做過，但它是使用 JSON 并使用 array.map：

{aulas.map((aula)  => (
                <div key={aula.id} className="col-md-4" style={{paddingBottom: '10px', paddingTop: '5px'}}>
                <Button className={(aula.estado==='sucio'? 'btn btn-danger': 'btn btn-success')} 
                onClick={()=> navigate('/LimpiarCurso',
                {state: {id:aula.id,num_aula:aula.num_aula,a?o:aula.a?o,
                division:aula.division,horario_retiro:aula.horario_retiro}})}>
                    {aula.a?o}{aula.division}</Button>
                </div>
            ))}

現在我正在嘗試用資料庫重寫相同的功能

這是我到目前為止所擁有的：

export default function AdministrarCurso(){
    const navigate= useNavigate();
    function mostrarCursos(navigate){
        const querySnapshot = getDocs(collection(db, "Curso"));
        querySnapshot.forEach((doc) => {
            // console.log(doc);
            // console.log(doc.data());
            console.log(doc.get('anio') doc.get('division'));
            <div className="col-md-4" style={{paddingBottom: '10px', paddingTop: '5px'}}>
            <Button 
            className={(doc.get('estado')==='sucio'? 'btn btn-danger': 'btn btn-success')} 
            onPress={()=> navigate('/LimpiarCurso',
            {state: doc.data()})}>
                {doc.get('anio') doc.get('division')}
            </Button>
            </div>
    });
    }
    return(
        <Container> 
            <AppBar style={{background: 'transparent', boxShadow: 'none'}}>
                <Toolbar>
                    <Button onClick={()=> LogOut(navigate)}>Cerrar Sesión</Button>
                </Toolbar>
            </AppBar>
             <div className="row">
             
            {mostrarCursos()}
                 {/* Acá hay botones que se generan en base a la cantidad de documentos que tenga el forEach
//                 Que te redireccionan a la pantalla de Limpiar Curso
//                  */}
             </div>
         </Container>
     )
 }

當然，它不起作用，因為首先它說“物件作為反應孩子無效”，我試圖改變但我不確定如何去做，我嘗試使用 useState 和 useEffect 但它沒有真正作業

現在它甚至不能與 querySnapshot 一起使用（它說它不是一個函式）

我究竟做錯了什么？

uj5u.com熱心網友回復：

React 渲染周期是同步的。在鉤子中獲取檔案useEffect并將檔案映射到檔案資料和屬性的陣列，并將其保存到本地狀態以在組件的渲染回傳中映射到 JSX。getDocs回傳一個 Promise，因此應該等待它。

export default function AdministrarCurso() {
  const navigate= useNavigate();

  const [docs, setDocs] = useState([]);

  useEffect(() => {
    const mostrarCursos = async () => {
      const querySnapshot = await getDocs(collection(db, "Curso"));

      const docs = [];

      querySnapshot.forEach((doc) => {
        docs.push({
          data: doc.data(),
          anio: doc.get('anio'),
          division: doc.get('division'),
          estado: doc.get('estado'),
        });
      });
      setDocs(docs);
    };

    mostrarCuros();
  }, []);

  return(
    <Container> 
      <AppBar style={{background: 'transparent', boxShadow: 'none'}}>
        <Toolbar>
          <Button onClick={() => LogOut(navigate)}>
            Cerrar Sesión
          </Button>
        </Toolbar>
      </AppBar>
      <div className="row">
        {docs.map(doc => (
          <div
            className="col-md-4"
            style={{ paddingBottom: '10px', paddingTop: '5px' }}
          >
            <Button 
              className={doc.estado === 'sucio'
                ? 'btn btn-danger'
                : 'btn btn-success'
              } 
              onPress={()=> navigate('/LimpiarCurso', { state: doc.data })}
            >
              {doc.anio   doc.division}
            </Button>
          </div>
        ))}
      </div>
    </Container>
  )
}

標籤：Google Cloud Collective javascript反应火力基地google-cloud-firestor

上一篇：undefined不是firebase中的物件（評估'auth.tenanatId'）本機反應

下一篇：如何使用CloudFireStore中的檔案ID訪問檔案欄位？