typescript 为什么在部署我的Next.js应用时，我的string对象中的键被转换为数字？

9jyewag0 于 2023-06-07 发布在 TypeScript

关注(0)|答案(2)|浏览(332)

在next.js应用程序中，
我在选择框中使用了一个字符串键和字符串值的对象，看起来像这样：

export const HOURS: { [key: string]: string } = {
  '00': '00',
  '01': '01',
  '02': '02',
  '03': '03',
  '04': '04',
  '05': '05',
  '06': '06',
  '07': '07',
  '08': '08',
  '09': '09',
  '10': '10',
  '11': '11',
  '12': '12',
  '13': '13',
  '14': '14',
  '15': '15',
  '16': '16',
  '17': '17',
  '18': '18',
  '19': '19',
  '20': '20',
  '21': '21',
  '22': '22',
  '23': '23',
} as const

当我在本地运行的应用程序中调试它时，它很好（它打印出定义的对象）
但是在捆绑和部署的应用程序中，对象的键被自动转换为数字，这使得选择框的排序顺序与期望的输出不同。（“00”变为0，“01”变为1，因此与本地应用程序相比，顺序不同）

0: "00",
1: "01",
2: "02"
...

有什么办法可以修复它并保留声明的密钥吗？
我尝试定义类型{ [key: string]: string }并声明为as const，但不起作用

typescript

来源：https://stackoverflow.com/questions/76403921/why-are-the-keys-in-my-string-object-for-a-select-box-being-converted-to-numbers

2条答案

按热度按时间

3ks5zfa01#

首先，你不应该依赖对象排序顺序，这是没有保证的。最好使用Map。它会解决你的问题。
如果要进一步：我看到你将对象命名为HOURS，可以假设你正在处理时间。而你的对象的真实的目标只是把零加到一位数的值上。根据您的特定实现和日期格式语法，还有多种其他方法可以设置时间格式。或者原始的方式这里是Javascript change getHours to 2 digit或者这里是https://bobbyhadz.com/blog/javascript-get-minutes-with-leading-zero

赞(0）回复(0）举报 2023-06-07

x6h2sr282#

您遇到的字符串对象中的键转换为数字的问题可能与JavaScript处理对象键的方式有关。默认情况下，JavaScript将对象键视为字符串，但当它们是纯数字时，它们也可以被解释为数字。
为了确保一致的顺序并防止键自动转换为数字，可以尝试使用对象数组而不是具有字符串键的对象。下面是一个例子：

export const HOURS = [
  { value: '00', label: '00' },
  { value: '01', label: '01' },
  { value: '02', label: '02' },
  // ... rest of the values
];

然后，在您的选择框中，您可以Map数组以生成选项：

<select>
  {HOURS.map((hour) => (
    <option key={hour.value} value={hour.value}>
      {hour.label}
    </option>
  ))}
</select>

赞(0）回复(0）举报 2023-06-07

我来回答

typescript 为什么在部署我的Next.js应用时，我的string对象中的键被转换为数字？

2条答案

相关问题

热门标签

最新问答