如何使用 useState 從 Firebase 檢索數據？

Question

我的 React 組件很少：

主頁.jsx

import Hotels from "./Hotels";
import WelcomePage from "./WelcomePage";

import { initializeApp } from "https://www.gstatic.com/firebasejs/9.6.0/firebase-app.js";
import {
  getFirestore,
  collection,
  getDocs,
  addDoc,
} from "https://www.gstatic.com/firebasejs/9.6.0/firebase-firestore.js";
import {
  getAuth,
  signInWithEmailAndPassword,
  createUserWithEmailAndPassword,
  onAuthStateChanged,
  signOut,
} from "https://www.gstatic.com/firebasejs/9.6.0/firebase-auth.js";
import { useState } from "react";

function MainPage() {
  const [hotels, getHotels] = useState([]);

  async function fetchHotels() {
    const firebaseConfig = {
      apiKey: "AIzaSyCHr3-x82i4RcGewtRs3XQ02Ps15Vm6ukQ",
      authDomain: "webapp-48b9a.firebaseapp.com",
      projectId: "webapp-48b9a",
      storageBucket: "webapp-48b9a.appspot.com",
      messagingSenderId: "889223227604",
      appId: "1:889223227604:web:aca93f8aa7b031fdfe7341",
    };

    const app = initializeApp(firebaseConfig);
    const db = getFirestore(app);
    const querySnapshot = await getDocs(collection(db, "reviews"));
    querySnapshot.forEach((doc) => {
      hotels.push(doc.data());
    });
    console.log(hotels);
  }

  fetchHotels();

  return (
    <main className="content">
      <Hotels hotels={hotels} />
    </main>
  );
}

export default MainPage;

酒店.jsx

import Hotel from "./Hotel";

function Hotels(props) {
  const { hotels = [] } = props;

  return (
    <div className="Hotels">
      {hotels.map((hotel, id) => (
        <Hotel key={id} {...hotel} />
      ))}
    </div>
  );
}

export default Hotels;

酒店.jsx

function Hotel(props) {
  const { name, img, localization, stars, review, author } = props;

  return (
    <div className="Hotel_card">
      <h2 className="Hotel_name">{name}</h2>
      <img className="Hotel_img" src={img} alt="hotel_img" />
      <h3 className="Hotel_localization">{localization}</h3>
      <p className="Hotel_stars">{stars}</p>
      <p className="Hotel_review">{review}</p>
      <h5 className="Hotel_author">Wroten by {author}</h5>
    </div>
  );
}

export default Hotel;

現在沒有顯示任何內容，因為 Hotel.jsx 看不到數據。 MainPage.jsx 中的 console.log(hotels) 輸出這個 object

控制台.png

問題 - 如何顯示數據？

我想我使用 useState 不正確，因為 Hostel.jsx 沒有收到任何數據

Answer 1

你不能像這樣傳遞道具： {...hotel}

嘗試這個：

 <div className="Hotels">
      {hotels.map((hotel, id) => (
       return <Hotel key={id} hotel={hotel} />
      ))}
    </div>

並在您的組件中獲取 prop hotel 並從那里傳遞數據：

function Hotel(props) {
  const { hotel } = props;

  return (
    <div className="Hotel_card">
      <h2 className="Hotel_name">{hotel.name}</h2>
      <img className="Hotel_img" src={hotel.img} alt="hotel_img" />
      <h3 className="Hotel_localization">{hotel.localization}</h3>
      <p className="Hotel_stars">{hotel.stars}</p>
      <p className="Hotel_review">{hotel.review}</p>
      <h5 className="Hotel_author">Wroten by {hotel.author}</h5>
    </div>
  );
}

Answer 2

在 React 中，您不能直接更改 state，否則它將無法偵聽 state 上的更改並根據更改重新渲染組件。 因此，在fetchHotels function 中獲取數據后，您需要使用 react state 提供的 setState 方法正確更新酒店 state：

const _hotels = [];
querySnapshot.forEach((doc) => {
 _hotels.push(doc.data());
});
getHotels(_hotels); //change the name of the method to setHotels to be more explicative

Answer 3

首先你大喊把fetchHotels()放在useEffect中：

代替

fetchHotels();

和

useEffect(() => {
   fetchHotels();
}, []);

然后，你不能直接推送到 react state 數組，

代替

querySnapshot.forEach((doc) => {
    hotels.push(doc.data());
});

和：

let list = [];
await querySnapshot.forEach((doc) => {
   list.push(doc.data());
});
getHotels(list);

最后，你有另一個錯誤

<h3 className="Hotel_localization">{hotel.localization}</h3>

localization是 object。 Objects are not valid as a React child

所以，應該是：

<h3 className="Hotel_localization">
    {localization._lat}, {localization._long}
</h3>

或類似的東西

演示： https://codesandbox.io/s/blissful-kate-7cmu3s