【发布时间】：2021-10-30 21:19:55
【问题描述】：
我正在向服务器发出GET 请求，作为响应，我得到了一个对象数组。
axios.get(`${HOST}/operations/post-flight-graph-data?orgId=${orgId}&ecoId=${ecoId}`)
.then(res => {
// order numbers
const orderNumbers = res.data.map(data => data.order_No);
// battery percentage before flight
const chargingBeforePercentage = res.data.map(data => {
return {
x: data.order_No,
y: parseFloat((data.charging?.before_Per) || 0)
}
});
// battery percentage after flight
const chargingAfterPercentage = res.data.map(data => {
return {
x: data.order_No,
y: parseFloat((data.charging?.after_Per) || 0)
}
});
console.log('res.data', res.data)
console.log({ orderNumbers })
console.log({ chargingBeforePercentage })
console.log({ chargingAfterPercentage})
})
.catch(err => console.log(err));
从服务器返回的数据
[
{
"charging": {
"before_Per": "51",
"after_Per": "51"
},
"order_No": "1"
},
{
"charging": {
"before_Per": "51",
"after_Per": "51"
},
"order_No": "7"
},
{
"charging": {
"before_Per": "99",
"after_Per": "86"
},
"order_No": "1"
},
{
"charging": {
"before_Per": "51",
"after_Per": "51"
},
"order_No": "9"
},
{
"charging": {
"after_Per": "51"
},
"order_No": "10"
},
{
"charging": {
"before_Per": "100",
"after_Per": "51"
},
"order_No": "11"
},
{
"charging": {
"before_Per": "100",
"after_Per": "51"
},
"order_No": "12"
},
{
"charging": {
"before_Per": "51",
"after_Per": "51"
},
"order_No": "14"
},
{
"charging": {
"before_Per": "83",
"after_Per": "51"
},
"order_No": "15"
},
{
"charging": {
"after_Per": "51",
"before_Per": "51"
},
"order_No": "13"
},
{
"charging": {
"before_Per": "100",
"after_Per": "69"
},
"order_No": "8"
},
{
"charging": {
"before_Per": "100",
"after_Per": "51"
},
"order_No": "18"
},
{
"charging": {
"after_Per": "51"
},
"order_No": "20"
},
{
"charging": {
"before_Per": "100",
"after_Per": "51"
},
"order_No": "17"
},
{
"charging": {
"after_Per": "51"
},
"order_No": "19"
}
]
控制台上的订单号
[
"1",
"7",
"1",
"9",
"10",
"11",
"12",
"14",
"15",
"13",
"8",
"18",
"20",
"17",
"19"
]
在控制台上的chargeBeforePercentage
[
{
"x": "1",
"y": 51
},
{
"x": "7",
"y": 51
},
{
"x": "1",
"y": 99
},
{
"x": "9",
"y": 51
},
{
"x": "10",
"y": 0
},
{
"x": "11",
"y": 100
},
{
"x": "12",
"y": 100
},
{
"x": "14",
"y": 51
},
{
"x": "15",
"y": 83
},
{
"x": "13",
"y": 51
},
{
"x": "8",
"y": 100
},
{
"x": "18",
"y": 100
},
{
"x": "20",
"y": 0
},
{
"x": "17",
"y": 100
},
{
"x": "19",
"y": 0
}
]
如果chargingBeforePercentage 的orderNumbers 和x 属性是字符串，则可以看到该元素。但是，对于我的操作，我需要将它们转换为整数。所以，我使用Number() 将字符串转换为整数。
为此，我将data.order_No 转换为Number(data.order_No)，然后更改了输出顺序。
GET(`operations/post-flight-graph-data?orgId=${orgId}&ecoId=${ecoId}`)
.then(res => {
// order numbers
const orderNumbers = res.data.map(data => Number(data.order_No));
// battery percentage before flight
const chargingBeforePercentage = res.data.map(data => {
return {
x: Number(data.order_No),
y: parseFloat((data.charging?.before_Per) || 0)
}
});
// battery percentage after flight
const chargingAfterPercentage = res.data.map(data => {
return {
x: Number(data.order_No),
y: parseFloat((data.charging?.after_Per) || 0)
}
});
console.log('res.data', res.data)
console.log({ orderNumbers })
console.log({ chargingBeforePercentage })
console.log({ chargingAfterPercentage})
})
.catch(err => console.log(err));
Number(data.order_No) 之后的订单号
[
1,
7,
1,
9,
10,
11,
12,
14,
15,
13,
8,
18,
20,
17,
19
]
chargingBeforePercentage after Number(data.order_No)
[
{
"x": 1,
"y": 51
},
{
"x": 1,
"y": 99
},
{
"x": 7,
"y": 51
},
{
"x": 9,
"y": 51
},
{
"x": 10,
"y": 0
},
{
"x": 11,
"y": 100
},
{
"x": 12,
"y": 100
},
{
"x": 14,
"y": 51
},
{
"x": 15,
"y": 83
},
{
"x": 13,
"y": 51
},
{
"x": 8,
"y": 100
},
{
"x": 18,
"y": 100
},
{
"x": 20,
"y": 0
},
{
"x": 17,
"y": 100
},
{
"x": 19,
"y": 0
}
]
你可以注意到chargingBeforePercentage的变化。
在使用Number()之前
chargingBeforePercentage[0].x = '1'
chargingBeforePercentage[1].x = '7'
chargingBeforePercentage[2].x = '1'
使用Number()之后
chargingBeforePercentage[0].x = 1
chargingBeforePercentage[1].x = 1
chargingBeforePercentage[2].x = 7
为什么会这样？
【问题讨论】：
-
How do I ask a good question? -> 添加minimal reproducible example。 minimal reproducible example 需要一组最小的输入、实际输出和显示行为的预期输出。我们还需要生成“实际输出”的代码（我在您的脚本中没有看到任何
Number(...)调用。） -
我不确定到底发生了什么，但我很确定你弄错了。您所描述的根本不可能；映射不会像那样改变顺序。我的猜测是服务器上的顺序发生了变化，而您正在查看两个单独请求的输出。因此，除非您发布显示订单已更改的控制台输出屏幕截图，否则我会将其归档在“不可重现”下
-
请将代码、错误消息、标记和其他文本信息作为文本发布，而不是作为文本的图片。为什么：meta.stackoverflow.com/q/285551/157247
-
@Andreas
Add a minimal reproducible example上面的代码本身就是完整的，你可以看到没有其他功能或涉及什么 -
@Rahul 您声称 Number() 更改了映射顺序，并且在您共享的代码示例中无处可见。除非你分享没有人知道发生了什么以及为什么。
标签： javascript node.js reactjs