从 Firebase 数据库结构获取数据并在多个元素中显示它

Question

我尝试从 Firebase 数据库的特定部分获取所有数据，并将信息显示到列表栏中。

这是代码：

import React from 'react'
import { RiDeleteBin6Line } from "react-icons/ri";
import { FaExchangeAlt } from "react-icons/fa";
import { ref, child, get } from 'firebase/database'
import { getDatabase } from 'firebase/database'
import { getAuth } from "firebase/auth";

export const CardDateList = ( ) => {

    const dbRef = ref(getDatabase());

    const auth = getAuth();
    const user = auth.currentUser.reloadUserInfo.localId;

    if (user !== null) {

        get(child(dbRef, `locations/identify/${user}`)).then((snapshot) => {
          if (snapshot.exists()) {
  
        let LocationName = (snapshot.val().name);

        get(child(dbRef, `locations/public/${LocationName}/availabledates/`)).then((snapshot) => {

          var DataDateList =[];
          
            snapshot.forEach(childSnapshot => {
              DataDateList.push(childSnapshot.val());
            });
          
          console.log(DataDateList);

  return (
    <div className='container_date_element'>
        <label key={DataDateList.date}>
            <div className='container_date_list_element' id={DataDateList.date}>
                <form className='form_date_list_element'>
                    <div className='list_element'>
                        <label>{DataDateList.date}</label>
                        <br></br>
                        <input></input>
                    </div>
                    <div className='list_element'>
                        <label>{DataDateList.genre}</label>
                        <br></br>
                        <input></input>
                    </div>
                    <div className='list_date_button'>
                          <button><FaExchangeAlt/></button>
                          <button><RiDeleteBin6Line/></button>
                    </div>
                </form>
            </div>
        </label>
    </div>
  );
})


} else {
    console.log("No data available");
  }

  
}).catch((error) => {
  console.error(error);
});


  };
};

我的结构在 Firebase 上看起来像这样：

如何获取 4 个不同日期（可用日期）的数据并将列表传递到列表栏？

console.log 显示以下内容：

Answer 1

由于

console.log

显示了正确的信息，因此您已经获取了正确的信息并正确处理它。问题似乎在于如何在 UI 中显示该信息。

当你动态加载数据时，你需要告诉React它需要刷新UI。常见的方法是更新组件的状态，您可以使用

useState

。