各位前端大佬,请教一个莫名其妙的前端 JS 问题。

2020-10-29 20:29:34 +08:00
 wzl20001001

撸代码时出现了一个奇怪的 Bug 。

主要逻辑是用 axios 获取后端接口返回的状态码,如果成功则将表单值置为空,以便下次添加。

但是当在控制台输出的时候,输出的对象是先经过主函数的 then 中的语句更改过的对象,但是如果读取其中的属性值,却是未经过更改的值。

测试的执行顺序也是输出的 1,2,3 的顺序(先是执行 dispatch 之前的语句,接着执行 action,最后执行 then 中的语句)。

有一点实在想不通:为啥还没运行到赋值语句,直接输出对象会是赋值后的样子。而且只有输出对象时,控制台显示对象的属性值是更改,但直接对象中的属性值时却未改变。

这是主函数:

addBookmark() {

  console.log(1)  // 1, 测试,用于测试执行顺序
  console.log(this.newBookmarkInfo) // 获取到的对象是经过过 then 中修改之后的对象 {bookmarkId:0, bookmarkTitle:1, bookmarkUrl:1}
  console.log(this.newBookmarkInfo.bookmarkTitle) // 获取到的是未经更改的 title: "title"

  this.$store.dispatch('addBookmark',this.newBookmarkInfo).then(() => { // 调用 Action

    console.log(this.newBookmarkInfo) // 同样是值更改过的对象
    console.log(this.newBookmarkInfo.bookmarkTitle) // 获取到的是未经更改的对象中的 title: "title"

    // 赋值语句
    this.newBookmarkInfo.bookmarkTitle='1'
    this.newBookmarkInfo.bookmarkUrl='1'

    console.log(3)  // 3

    // 对表单状态和弹窗状态的重置
    this.$refs.obs.reset()
    this.dialog = false
  }).catch(error => {
    console.log('error')
    console.log(error.response)
  })
},

这是 vuex 中的 Action:

addBookmark(undefine, newBookmarkInfo){
  console.log(2)  // 2 
  console.log(newBookmarkInfo)  // 同样也是被更改过的对象
  console.log(newBookmarkInfo.bookmarkTitile) // 获取到的是未经过更改的 title
  return new Promise((resolve,reject) => {
    addBookmarkOne(newBookmarkInfo).then(resp => {
      const { data } = resp
      resolve(data)
    }).catch(error => {
      reject(error)
    })
  })
},

这是运行的控制台截图:

2552 次点击
所在节点    Vue.js
8 条回复
shintendo
2020-10-29 21:01:37 +08:00
简单地说,chrome 在 console.log 输出对象的时候,输出的是对象的引用,而非对象内容的“快照”,你点+号展开的时候才对内容求值
shintendo
2020-10-29 21:03:01 +08:00
补充,解决这个问题的一个方法是 console.log(JSON.parse(JSON.stringify(obj)))
wzl20001001
2020-10-29 21:05:50 +08:00
@shintendo 懂了,谢谢大佬。一直以为是代码的问题,没往这方面想。
SxqSachin
2020-10-30 08:38:13 +08:00
你可以尝试在每一句 console.log 下加一行 debugger;,来看那个时点这个对象的值。
azcvcza
2020-10-30 09:45:57 +08:00
火狐还是什么浏览器就严谨一点,到了对象该输出的时候才输出。chrome 的话,如果一开始一个{},打印的时候没值,但异步之后有值,那么之前打印的那条也会变成有值
fengmumu
2020-10-30 10:37:35 +08:00
@azcvcza 火狐
azcvcza
2020-10-30 11:02:38 +08:00
@fengmumu 可以
wzl20001001
2020-10-31 02:21:30 +08:00
@SxqSachin 今天晚上搞其他的组件的时候发现问题了,在值传递的时候没有进行对象拷贝,直接把源对象赋值给了变量,导致了加入 vuex 的一直是对源对象的引用。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/719929

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX