如何在ReactJs中缩短代码，而不是使用Switch案例

Question

我有这样的代码，可以通过图表显示用户月份的订单统计

useEffect(() => {
if (order.alls.length > 0 || reservation.alls.length > 0) {
let jan = 0;
let feb = 0;
let mar = 0;
let apr = 0;
let may = 0;
let jun = 0;
let jul = 0;
let aug = 0;
let sep = 0;
let oct = 0;
let nov = 0;
let dec = 0;
order.alls.forEach((ord, idx) => {
const month = moment.unix(ord.date_order).format('M');
switch (Number(month)) {
case 1:
jan = jan + ord.is_order;
break;
case 2:
feb = feb + ord.is_order;
break;
case 3:
mar = mar + ord.is_order;
break;
case 4:
apr = apr + ord.is_order;
break;
case 5:
may = may + ord.is_order;
break;
case 6:
jun = jun + ord.is_order;
break;
case 7:
jul = jul + ord.is_order;
break;
case 8:
aug = aug + ord.is_order;
break;
case 9:
sep = sep + ord.is_order;
break;
case 10:
oct = oct + ord.is_order;
break;
case 11:
nov = nov + ord.is_order;
break;
case 12:
dec = dec + ord.is_order;
break;
default:
break;
}
});
let data = [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec];
const tempStatics = {
labels: ["Jan", "Feb", "Mar", "Apr", "May", "June", "July", "Aug", "Sep", "Oct", "Nov", "Dec"],
datasets: [
{
label: "Order",
data: data,
backgroundColor: "#fab1a0",
borderColor: "#ff7675",
borderWidth: 1,
},
],
}
setStatics(tempStatics)
}
}, [order]);

正如你在上面看到的，我的代码太长了，我想把它缩短，就像我可以使用一些for循环之类的，但我现在不知道如何在以前的代码中使用它。除此之外，我还有一个预订的统计数据还没有显示，如果我创建它，它会更长。

有人能帮我吗？我刚刚创建了它，所以我没有太多的经验来解决这个问题。

Answer 1

将要定义的labels移动到效果挂钩外，因为它们不会更改。

const labels = [
"Jan",
"Feb",
"Mar",
"Apr",
"May",
"June",
"July",
"Aug",
"Sep",
"Oct",
"Nov",
"Dec"
];

预先声明您的data数组，并通过收集类似的案例来简化switch逻辑。您也可以直接比较数组长度，因为任何非零长度都被认为是真实的。

useEffect(() => {
if (order.alls.length || reservation.alls.length) {
const data = new Array(12).fill(0);
order.alls.forEach((ord, idx) => {
const month = moment.unix(ord.date_order).format("M");
const monthKey = Number(month) - 1;
switch (monthKey) {
case 1:
case 2:
case 9:
case 10:
data[monthKey] += ord.is_order;
break;
case 3:
case 4:
case 5:
case 6:
case 7:
case 8:
case 11:
case 12:
data[monthKey] += ord.total;
break;
default:
}
});

const tempStatics = {
labels,
datasets: [
{
label: "Order",
data: data,
backgroundColor: "#fab1a0",
borderColor: "#ff7675",
borderWidth: 1
}
]
};
setStatics(tempStatics);
}
}, [order]);

编辑

我看到您更新了代码片段，这大大简化了forEach循环：

useEffect(() => {
if (order.alls.length || reservation.alls.length) {
const data = new Array(12).fill(0);
order.alls.forEach((ord, idx) => {
const month = moment.unix(ord.date_order).format("M");
data[Number(month) - 1] += ord.is_order;
});

const tempStatics = {
labels,
datasets: [
{
label: "Order",
data: data,
backgroundColor: "#fab1a0",
borderColor: "#ff7675",
borderWidth: 1
}
]
};
setStatics(tempStatics);
}
}, [order]);

Answer 2

您已经采用了正确的方法：let data = [jan, feb, mar, apr, may, jun, jul, aug, sep, oct, nov, dec];

我建议从一开始就使用数组，只在索引0处使用1月，直到索引11处使用12月。

因此，您可以通过以下方式创建一个空数组：

const data = new Array(12).fill(0)

您可以通过以下方式添加数字：

data[Number(month) - 1] =  data[Number(month) - 1] + ord.total

为什么有些月份会添加ord.is_order而不是ord.total？