Expected Object, got Array 2018-06-22 10:34:06

今天写一个实例,碰到个很神奇的问题。 我使用props传了一段json,可以正常接收,但在子组件设置数据类型后,却报这么一个错误:

Invalid prop: type check failed for prop "homeSticksData". Expected Object, got Array.

我百思不得其解,百度半天也没找着答案。

迫于无奈,只能请教同事了。 

没想到,答案竟是……这样。  

首先,因为上述错误,告诉我,明明系统检测数据是个array,我为什么要设一个object?  

在请教之前,我先将数据设置为array,这时候错误就变成expected array, got object了,也就是所谓的系统检测是个object,我为毛要设定一个array? 

于是我看了一下自己写的接口,发现我所读取的属性,其实是一个数组。  

那么问题来了,既然是数组,为何我设置为array,还要报错? 原来真相竟是如此之简单。  

会出现这样的错误,是因为我在从接口读取数据时,初始化设置的数据类型有问题! 

我是这么写的:

data () {
    return {
      homeSticksData: {}
    }
}

我给数据设置的类型,是{},也就是json,或者说是Object,而实际上这个数据却是一个数组。这时候,就会出现上述错误。 因此,我需要将homeSticksData的数据类型,设置为数组,如下:

data () {
    return {
      homeSticksData: []
    }
}

回到子组件

props: {
  homeSticksData: array
}

这样就正常了。同事说,之所以会这样,是因为我犯了一个常识性错误……在咱JS里,array本身也是一个对象。

  1. Laravel5.7
  2. 微信相关
  3. Mysql
  4. 前端开发
  5. 随记
  6. 写作素材
  7. 开发工具
  8. 互联网