Reactjs 使用React从firestore获取地图数据

我在尝试找出如何从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;

import React，{useState，useffect}来自“React”；
从“../../../FireBase/FireBase”导入{firestore}”；
从“/CartItem”导入CartItem；
常量CartPage=（道具）=>{
const[cart，setCart]=useState（null）；
useffect（（）=>{
const fetchCart=async（）=>{
const doc=等待firestore
.收集（“用户”）
.doc（“CfL5uszL3CTE1nIQTgDrKK5q4OV2”）
.get（）；
const data=doc.data（）；
控制台日志（“数据”+数据）；
如果（！数据）{
//文档不存在
log（“命中null”）；
setCart（空）
}否则{
控制台日志（“命中”）；
setCart（data.cart）；
}
控制台日志（“购物车”+购物车）；
}
fetchCart（）；
}, []);
如果（！购物车）{
//如果愿意，可以在加载过程中呈现占位符，也可以只返回null而不呈现任何内容。
返回null；
}
返回(
运货马车
{cart.map（cartItem=>(
{cartItem.name}
))}
);
};
导出默认CartPage；

---

我不认为您可以用这种方式创建异步组件。您在组件中返回的应该是简单的JSX代码。如果您想在组件内部异步执行某些操作，您应该将这个useffect钩子包装在内部

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

const CartPage=（道具）=>{
const[cart，setCart]=useState（null）
useffect（（）=>{
常量内部=异步（）=>{
const ref=等待firestore
.收集（“用户”）
.get（“CfL5uszL3CTE1nIQTgDrKK5q4OV2”）.cart；
赛特车(
参考地图（（项目）=>({
id:item.id，
名称：item.name
}))
);
};
内（）；
}, []);
返回(
运货马车
);
};

您得到的错误是因为您正在从组件返回承诺（您已将其设置为异步函数，异步函数返回承诺）。在react中渲染时无法返回承诺和其他任意对象。您需要有一个状态变量来保存数据。在第一次渲染时，您将没有数据，然后使用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>
  );
};

const CartPage=（道具）=>{
const[cart，setCart]=useState（null）；
useffect（（）=>{
const fetchCart=async（）=>{
const doc=等待firestore
.收集（“用户”）
.doc（“CfL5uszL3CTE1nIQTgDrKK5q4OV2”）
.get（）；
const data=doc.data（）；
如果（！数据）{
//文档不存在
setCart（空）
}否则{
setCart（data.cart）；
}
}
fetchCart（）；
}, []);
如果（！购物车）{
//如果愿意，可以在加载过程中呈现占位符，也可以只返回null而不呈现任何内容。
返回null；
}
返回(
运货马车
{cart.map（cartItem=>(
{cartItem.name}
))}
);
};

您能否在codesandbox或类似平台上共享您的代码？很难从映像中调试它。@TomaszKisiel我已经添加了代码，现在我收到一个错误“未处理的拒绝（TypeError）：无法读取未定义的属性“map”，这意味着ref不是数组。这个命令

firestore.collection（“Users”）.get（“CfL5uszL3CTE1nIQTgDrKK5q4OV2”）.cart可能有问题它是正确的集合名称和正确的id？我已经实现了你的代码添加，我得到一些错误。下面是控制台日志数据[object object]hit cart Null，不知道您添加了什么代码，我不知道这些日志语句的意义。因此我认为这与您如何从用户调用cart有关。你知道为什么购物车是空的吗？我复制了你的代码来尝试和玩它，以确保它的工作。所以我运行的代码就是上面针对这个问题的更新代码。我刚刚添加了日志，以查看您的工作情况
data[object]
，这意味着它收回了数据。如果将log语句更改为
console.log（'data'，data）
，则可以更好地查看它<代码>点击

这是确认它进入了

其他

<代码>购物车空值这告诉您，

购物车

的值在效果开始时为空。这完全是意料之中的。调用setCart不会更改本地常量的值，因此此log语句没有用处。如果要验证组件是否已重新提交，请在组件主体中放置一条log语句，而不是在效果中。