使用 React 从 Firestore 获取地图数据

Question

我无法弄清楚如何在 reactjs 中从 Firestore 获取地图数据。我的代码不断出错，说“对象作为 React 无效”。有人可以给我举个例子，或者给我看一个下面有我的数据库的例子吗？

import React, { useState, useEffect } from "react";
import { firestore } from "../../../FireBase/FireBase";
import CartItem from "./CartItem";
const CartPage = (props) => {
  const [cart, setCart] = useState(null);
  useEffect(() => {
    const fetchCart = async () => {
      const doc = await firestore
        .collection("Users")
        .doc("CfL5uszL3CTE1nIQTgDrKK5q4OV2")
        .get();

      const data = doc.data();
      console.log("data " + data);
      if (!data) {
        // document didn't exist
        console.log("hit null");
        setCart(null)
      } else {
        console.log("hit");
        setCart(data.cart);
      }
      console.log("cart " + cart);
    }

    fetchCart();
  }, []);

  if (!cart) {
    // You can render a placeholder if you like during the load, or just return null to render nothing.
    return null;
  }

  return (
    <div className="cartpage">
      <h1>cart</h1>
      <div className="cart">
        {cart.map(cartItem => (
          <div key={cartItem.id}>{cartItem.name}</div>
        ))}
      </div>
    </div>
  );
};

export default CartPage;

Answer 1

您得到的错误是因为您从组件返回了一个承诺（您已将其设为异步函数，并且异步函数返回承诺）。在 react 中渲染不能返回 Promise 和其他任意对象。您需要有一个状态变量来保存您的数据。在第一次渲染时，您将没有数据，然后您将使用 useEffect 来获取数据并更新状态

此外，您在尝试获取和访问数据的方式上存在一些错误。您正在调用 .get("Cf...V2")，但 .get 不带参数。如果要指定要获取的文档，请使用 .doc() 函数。 .get() 然后将返回一个承诺，因此您需要在尝试访问它的任何属性之前等待它。您获得的数据将是一个对象，其中包含屏幕截图右侧的所有属性，您需要从中提取 cart 属性。

简而言之，我推荐如下内容：

const CartPage = (props) => {
  const [cart, setCart] = useState(null);
  useEffect(() => {
    const fetchCart = async () => {
      const doc = await firestore
        .collection("Users")
        .doc("CfL5uszL3CTE1nIQTgDrKK5q4OV2")
        .get();

      const data = doc.data();
      if (!data) {
        // document didn't exist
        setCart(null)
      } else {
        setCart(data.cart);
      }
    }

    fetchCart();
  }, []);

  if (!cart) {
    // You can render a placeholder if you like during the load, or just return null to render nothing.
    return null;
  }

  return (
    <div className="cartpage">
      <h1>cart</h1>
      <div className="cart">
        {cart.map(cartItem => (
          <div key={cartItem.id}>{cartItem.name}</div>
        ))}
      </div>
    </div>
  );
};

Answer 2

我不认为你可以用这种方式创建异步组件。您在组件中返回的内容应该是简单的 JSX 代码。如果你想在组件中异步做一些事情，你应该把它包装在 useEffect 钩子里。

const CartPage = (props) => {
  const [ cart, setCart ] = useState(null)

  useEffect(() => {
    const inner = async () => {
      const ref = await firestore
        .collection("Users")
        .get("CfL5uszL3CTE1nIQTgDrKK5q4OV2").cart;

      setCart(
        ref.map((item) => ({
          id: item.id,
          name: item.name
        }))
      );
    };

    inner();
  }, []);

  return (
    <div className="cartpage">
      <h1>cart</h1>
      <div className="cart"></div>
    </div>
  );
};