在本机应用程序中从 firebase 获取和接收数据时，数据格式不正确

Question

我正在尝试获取以正确格式存储在 firebase 中的订单数据，但是当我试图在 console.log() 中查看时，它显示的数据格式不正确。

这是我从 firebase 收到的数据。

Array [
  Order {
    "date": 1200,
    "id": "-Me6W4SzHB3RbV_3PdcO",
    "items": "u1",
    "totalAmount": Array [
      Object {
        "productId": "-Md76UnJ1I1lNhGgldH3",
        "productPrice": 1200,
        "productTitle": "Macbook Air M1 2020",
        "quantity": 1,
        "sum": 1200,
      },
    ],
  },
  Order {
    "date": 1200,
    "id": "-Me92VJEha-d-x5S3oya",
    "items": "u1",
    "totalAmount": Array [
      Object {
        "productId": "-Md76UnJ1I1lNhGgldH3",
        "productPrice": 1200,
        "productTitle": "Macbook Air M1 2020",
        "quantity": 1,
        "sum": 1200,
      },
    ],
  },
  Order {
    "date": 1200,
    "id": "-Me93LLXuho2T0D1Vpqx",
    "items": "u1",
    "totalAmount": Array [
      Object {
        "productId": "-Md76UnJ1I1lNhGgldH3",
        "productPrice": 1200,
        "productTitle": "Macbook Air M1 2020",
        "quantity": 1,
        "sum": 1200,
      },
    ],
  },
]

而且，当我尝试 console.log 我从 action/orders 收到的订单时，我得到了这个，我正在调度一个操作以从 firebase 获取数据。

export const getOrders = () => {
  return async (dispatch) => {
    try {
      const response = await fetch(
        "https://shopping-app-62***-default-rtdb.firebaseio.com/orders/u1.json"
      );

      if (!response.ok) {
        throw new Error("Something went wrong!");
      }

      const resData = await response.json();
      const loadedOrders = [];

      for (const key in resData) {
        loadedOrders.push(
          new Order(
            key,
            "u1",
            resData[key].cartItems,
            resData[key].totalAmount,
            new Date(resData[key].date)
          )
        );
      }

      console.log(loadedOrders);

      dispatch({ type: GET_ORDER, orders: loadedOrders });
    } catch (error) {
      throw error;
    }
  };
};

订单class：

import moment from "moment";

class Order {
  constructor(id, items, totalAmount, date) {
    this.id = id;
    this.items = items;
    this.totalAmount = totalAmount;
    this.date = date;
  }
  get readableDate() {
    return moment(this.date).format("MMMM Do YYYY, hh:mm");
  }
}

export default Order;

我附上了下图以显示我的数据是如何存储在 firebase 中的。

为什么我得到的是 totalAmount 中的产品详细信息数组，而不是日期，我得到的是 totalAmount？

Answer 1

您在此处创建 Order 个对象：

new Order(
  key,
  "u1",
  resData[key].cartItems,
  resData[key].totalAmount,
  new Date(resData[key].date)
)

但它与您的构造函数声明不一致：

constructor(id, items, totalAmount, date) {
  this.id = id;
  this.items = items;
  this.totalAmount = totalAmount;
  this.date = date;
}

"u1" 值不合适。

constructor(id, unknown, items, totalAmount, date) {
  this.id = id;
  this.items = items;
  this.totalAmount = totalAmount;
  this.date = date;
  this.unknown = unknown;
}

您应该将属性对象传递给构造函数 and/or 将来使用 JSDoc 或 TypeScript 等工具来捕获这些问题。

new Order({
  id: key,
  unknown: "u1",
  items: resData[key].cartItems,
  totalAmount: resData[key].totalAmount,
  date: new Date(resData[key].date)
})

constructor({ id, items, totalAmount, date, unknown }) {
  this.id = id;
  this.items = items;
  this.totalAmount = totalAmount;
  this.date = date;
  this.unknown = unknown;
}

在本机应用程序中从 firebase 获取和接收数据时，数据格式不正确

Format of Data is incorrect when fetching and receiving it from firebase in react native app

javascript

fetch

react-native

firebase-realtime-database

react-redux