问题描述
我有一个 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
的值。我做错了什么,我应该在代码中更改什么?
解决方法
在映射对象之前,您需要过滤与您的条件匹配的对象。您需要调用 billInfo.map()
而不是调用 billInfo.filter((e) => e.order_status === "your_status").map()
。