reactjs - 如何在反应中从firestore映射一组地图

问题描述

我正在尝试浏览存储在每个“用户”中的一系列订单。我可以查询并找到有订单但无法显示的订单。我不断收到错误消息“无法读取 null 的属性 'map'”。我哪里错了？下图显示了所有订单如何存储在“订单”中

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { firestore } from "../../../FireBase/FireBase";

const OrdersAdmin = (props) => {
  const [order, setOrder] = useState(null);

  useEffect(() => {
    const fetchOrder = async () => {
      const doc = await firestore.collection("Users");
      const snapshot = await doc.where("orders", "!=", []).get();
      if (snapshot.empty) {
        console.log("No matching documents.");
        return <h1>No Orders</h1>;
      }
      var ans = [];
      snapshot.forEach((doc) => {
        console.log(doc.id, "=>", doc.data().orders);
        setOrder(doc.data().orders)
      });
    };

    fetchOrder();
  }, [props]);

  return (
    <div className="adminOrders">
      <h1>orders</h1>
      {console.log(order)}
      
      {order.map((orderItem) => (
              <div className="singleOrder" key={orderItem.id}>
                  <p>{orderItem}</p>
              </div>
          ))}
    </div>
  );
};

export default OrdersAdmin;

标签： reactjsgoogle-cloud-firestore

问题在于的初始order值为null。null没有Array.prototype.map，因此您会收到错误消息。尝试更新您的渲染以使用条件渲染，仅在为真Array.prototype.map时尝试：orderArray

{order && order.length > 0 && order.map((orderItem) => (
  <div className="singleOrder" key={orderItem.id}>
     <p>{orderItem}</p>
  </div>
))}

order否则，您可以使用可以执行的空数组的更好的默认值Array.prototype.map：

const [order, setOrder] = useState([]);

希望这会有所帮助！

reactjs - 如何在反应中从firestore映射一组地图

问题描述

解决方案

推荐阅读