Question

我有一个 API，它给了我一个对象数组，这是来自 API 的响应

{
  data: [
    { order_status: "delivered", order_count: 2, order_amount: 1194 },
    { order_status: "processing", order_count: 1, order_amount: 597 },
  ]
}

现在我必须根据每个对象的 order_status 值解析这些数据，这意味着我将检查 order_status 值并将来自该特定对象的相应数据放在一列中，依此类推。预期的视图是这样的

我的实现代码是

import Loader from "@components/common/Loader";
import { getBillInfo } from "@request/billing";
import { IBillInfo } from "models/billing";
import { useRouter } from "next/router";
import React, { useState } from "react";
import { IoIosArrowDown } from "react-icons/io";
import { useQuery } from "react-query";
import { CSSTransition } from "react-transition-group";

export default function BillingInfo() {
  const router = useRouter();
  const shopSlug = router.query.slug as string;
  const { data, isSuccess, isLoading } = useQuery(
    [`bill-info`, shopSlug],
    () => getBillInfo(shopSlug),
    {
      enabled: Boolean(shopSlug),
      staleTime: Infinity,
    }
  );

  const billInfo: IBillInfo[] = isSuccess && data?.data.data;

  const [toggle, setToggle] = useState(false);
  return (
    <div className="mt-6">
      <div className="bg-white rounded shadow overflow-hidden">
        <div
          className="flex justify-between py-1 px-4 items-center cursor-pointer hover:bg-gray-50"
          onClick={() => setToggle(!toggle)}
        >
          <h4 className="text-gray-600 mb-1 ml-1 mt-1 font-medium">
            Billing Information
          </h4>
          <div>
            <IoIosArrowDown size={20} />
          </div>
        </div>

        <CSSTransition
          in={toggle}
          timeout={100}
          classNames="slide-down"
          unmountOnExit
        >
          <div className="slide-down">
            {isLoading ? (
              <div className="flex justify-center items-center h-full">
                <Loader />
              </div>
            ) : (
              <div className="grid grid-cols-5 gap-4 p-6">
                <div>
                  <h5 className="text-gray-500 capitalize">Total Orders</h5>
                  {billInfo &&
                  billInfo.some((el) => el.order_status === "total")
                    ? billInfo.map((order: IBillInfo, index) => (
                        <div key={index}>
                          <h3 className="font-medium text-xl">
                            ৳ {order.order_amount || "N/A"}
                          </h3>
                          <p className="text-gray-500">
                            Quantity:{" "}
                            <strong className="font-semibold text-black">
                              {order.order_count || "N/A"}
                            </strong>
                          </p>
                        </div>
                      ))
                    : "N/A"}
                </div>
                <div>
                  <h5 className="text-gray-500 capitalize">Paid Orders</h5>
                  {billInfo && billInfo.some((el) => el.order_status === "paid")
                    ? billInfo.map((order: IBillInfo, index) => (
                        <div key={index}>
                          <h3 className="font-medium text-xl">
                            ৳ {order.order_amount || "N/A"}
                          </h3>
                          <p className="text-gray-500">
                            Quantity:{" "}
                            <strong className="font-semibold text-black">
                              {order.order_count || "N/A"}
                            </strong>
                          </p>
                        </div>
                      ))
                    : "N/A"}
                </div>
                <div>
                  <h5 className="text-gray-500 capitalize">
                    Processing Orders
                  </h5>
                  {billInfo &&
                  billInfo.some((el) => el.order_status === "processing")
                    ? billInfo.map((order: IBillInfo, index) => (
                        <div key={index}>
                          <h3 className="font-medium text-xl">
                            ৳ {order.order_amount || "N/A"}
                          </h3>
                          <p className="text-gray-500">
                            Quantity:{" "}
                            <strong className="font-semibold text-black">
                              {order.order_count || "N/A"}
                            </strong>
                          </p>
                        </div>
                      ))
                    : "N/A"}
                </div>
                <div>
                  <h5 className="text-gray-500 capitalize">Picked Orders</h5>
                  {billInfo &&
                  billInfo.some((el) => el.order_status === "picked")
                    ? billInfo.map((order: IBillInfo, index) => (
                        <div key={index}>
                          <h3 className="font-medium text-xl">
                            ৳ {order.order_amount || "N/A"}
                          </h3>
                          <p className="text-gray-500">
                            Quantity:{" "}
                            <strong className="font-semibold text-black">
                              {order.order_count || "N/A"}
                            </strong>
                          </p>
                        </div>
                      ))
                    : "N/A"}
                </div>
                <div>
                  <h5 className="text-gray-500 capitalize">Refunded Orders</h5>
                  {billInfo &&
                  billInfo.some((el) => el.order_status === "refunded")
                    ? billInfo.map((order: IBillInfo, index) => (
                        <div key={index}>
                          <h3 className="font-medium text-xl">
                            ৳ {order.order_amount || "N/A"}
                          </h3>
                          <p className="text-gray-500">
                            Quantity:{" "}
                            <strong className="font-semibold text-black">
                              {order.order_count || "N/A"}
                            </strong>
                          </p>
                        </div>
                      ))
                    : "N/A"}
                </div>
                <div>
                  <h5 className="text-gray-500 capitalize">Shipped Orders</h5>
                  {billInfo &&
                  billInfo.some((el) => el.order_status === "shipped")
                    ? billInfo.map((order: IBillInfo, index) => (
                        <div key={index}>
                          <h3 className="font-medium text-xl">
                            ৳ {order.order_amount || "N/A"}
                          </h3>
                          <p className="text-gray-500">
                            Quantity:{" "}
                            <strong className="font-semibold text-black">
                              {order.order_count || "N/A"}
                            </strong>
                          </p>
                        </div>
                      ))
                    : "N/A"}
                </div>
                <div>
                  <h5 className="text-gray-500 capitalize">Delivered Orders</h5>
                  {billInfo &&
                  billInfo.some((el) => el.order_status === "delivered")
                    ? billInfo.map((order: IBillInfo, index) => (
                        <div key={index}>
                          <h3 className="font-medium text-xl">
                            ৳ {order.order_amount || "N/A"}
                          </h3>
                          <p className="text-gray-500">
                            Quantity:{" "}
                            <strong className="font-semibold text-black">
                              {order.order_count || "N/A"}
                            </strong>
                          </p>
                        </div>
                      ))
                    : "N/A"}
                </div>
              </div>
            )}
          </div>
        </CSSTransition>
      </div>
    </div>
  );
}

但是这个实现给了我这个观点

这意味着来自所有对象的所有值都显示在所有列中，但我只想要每个相应列中对应于 order_status 的值。我做错了什么，我应该在代码中更改什么？

Answer 1

在映射对象之前，您需要过滤与您的条件匹配的对象。您需要调用 billInfo.map() 而不是调用 billInfo.filter((e) => e.order_status === "your_status").map()。

根据键的唯一值从对象数组中获取数据

1 个答案: