Vue格式化数据后切换页面出现NaN问题及解决

2024-04-02 19:55

短信预约 -IT技能 免费直播动态提醒

格式化数据后切换页面出现NaN

目的

在一个vue项目中，需要对返回数据的时间戳进行格式化，数据格式如下

res =  [ { "program_id": 6, "code": 1005,"create_time": 1627022366, 
            "child": [ { "program_id": 7, "code": 1006, "create_time": 1627022366,} ] } ]

问题

利用递归进行格式化，在computed中执行，第一次显示没有问题，但切换页面后，时间显示变成一行NaN

formatProjectList (list) {
  let projectList = list.map((item) => {
  // formatTime是格式化函数，返回'Y-m-d H:i:s'格式的字符串
      item.create_time = formatTime(new Date( item.create_time * 1000 ), 'Y-m-d H:i:s')
      if (item.child) { this.formatProjectList (item.child) }
      return item
    })
    return projectList
  },

原因

在map函数中，item.create_time 直接修改了源数据res，res是已格式完成的字符串

切换页面会重新触发computed，此时再执行格式化会将字符串传给formatTime格式化函数，formatTime接收了字符串会返回NaN

解决方案

将源数据res进行深拷贝，再执行该函数

computed: {
  projectList () {
      // deepClone 是深拷贝函数
      let newList = deepClone(res.data.list)
      let formatList = this.formatProjectList(newList)
      return formatList
    }
  }