为什么要更改 getServerSideProps 数据？

Question

我将从 API 获取数据，当我将 getServerSideProps 数据传递给 index.js 时，道具数组按等级排序。 [1,2,3..等].

例如：数据

[
 {rank: 1, price: 123},
 {rank: 2, price: 1958},
 {rank:3, price: 56}
]

当我将该数据更改为不同的变量时，例如：

const topPrice = data
    .sort((a, b) => a.price < b.price ? 1 : -1).slice(0, 3);

控制台日志显示 data 现在也按价格排序，而我只想 topPrice 排序，为什么？

Answer 1

sort 函数会改变您的原始列表 data。为避免这种情况，您应该在调用 sort

之前创建列表的副本

const data = [{
    rank: 1,
    price: 123
  },
  {
    rank: 2,
    price: 1958
  },
  {
    rank: 3,
    price: 56
  }
]

const topPrice = [...data]
  .sort((a, b) => a.price < b.price ? 1 : -1).slice(0, 3);

console.log({
  data,
  topPrice
})

如果想要更清楚，可以引入一个新的变量来保存新的数组

const data = [{
    rank: 1,
    price: 123
  },
  {
    rank: 2,
    price: 1958
  },
  {
    rank: 3,
    price: 56
  }
]

const copiedData = [...data]
const topPrice = copiedData
  .sort((a, b) => a.price < b.price ? 1 : -1).slice(0, 3);

console.log({
  data,
  topPrice
})

为什么要更改 getServerSideProps 数据？

Why is getServerSideProps data being changed?

javascript

next.js