Vue：创建的钩子出错：“TypeError：无法将未定义或空值转换为对象”

Question

所以当我尝试在浏览器中运行我的父组件“仪表板”时。子组件“ChartUsage”在我的控制台中引发错误：[Vue warn]: Error in created hook: "TypeError: Cannot convert undefined or null to object" 当我尝试调试时，我看到道具：userSubmitsProp，只返回一个空数组。所以这也很奇怪。但我不知道为什么。谁能帮我吗？

发送prop的父组件：userSubmitsProp:

<template>
  <div class="dashboard">
    <cards :userDataProp="currentUserData"/>
    <chartusage :userSubmitsProp="previousSubmits" />
  </div>
</template>

<script>
import db from '@/firebase/init'
import firebase from 'firebase'
import moment from 'moment'
import Chartusage from '@/components/dashboard/ChartUsage'
import Cards from '@/components/dashboard/Cards'

export default {
  name: 'Dashboard',
  components: {
    Chartusage,
    Cards
  },
  data () {
    return {
      currentUserData: {},
      previousSubmits: []
    }
  },
  created () {
    let user = firebase.auth().currentUser

    // find the user record
    db.collection('users').where('user_id', '==', user.uid).get()
      .then(snapshot => {
        snapshot.forEach((doc) => {
          let userData = doc.data()
          userData.timestamp = moment(doc.data().timestamp).format('lll')
          this.currentUserData = userData
        })
      })
      .then(() => {
        // fetch the user previous submits from the firestore
        db.collection('submits').where('user', '==', this.currentUserData.alias).get()
          .then(snapshot => {
            snapshot.forEach(doc => {
              let submit = doc.data()
              submit.id = doc.id
              submit.timestamp = moment(doc.data().timestamp).format('lll')
              this.previousSubmits.push(submit)

              // sort previousSubmits array by date
              this.previousSubmits.sort((a, b) => {
                a = new Date(a.timestamp)
                b = new Date(b.timestamp)
                return b - a
              })
              console.log(this.previousSubmits)
            })
          })
      })
  }
}
</script>

<style>
</style>

接收 userSubmitsProp 属性的子组件用它制作图表：

<template>
  <div class="check-usage">
    <div class="row">
      <div class="col s12">
        <div class="chart">
          <chartjs-line
            :fill="true"
            :datalabel="'My household usage'"
            :labels="labels"
            :data="dataset"
            :bordercolor="'#1976D2'"
            :backgroundcolor="'rgba(25,118,210, 0.5)'"
            :pointborderwidth="mywidth"
            :pointbordercolor="mypointbordercolor"
            :pointhoverborderwidth="hoverwidth"
            :pointhoverbackgroundcolor="hoverbackgroundcolor"
            :pointhoverbordercolor="hoverbordercolor"
            :bind="true">
          </chartjs-line>
          </div>
      </div>
  </div>
  </div>
</template>

<script>
export default {
  name: 'Chartusage',
  props: {
    userSubmitsProp: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      submits: this.userSubmitsProp,
      // chart data
      labels: [],
      dataset: [],
      // hover point
      mywidth: 3,
      mypointbordercolor: '#1976D2',
      hoverwidth: 3,
      hoverbackgroundcolor: '#636b6f',
      hoverbordercolor: '#ffd663'
    }
  },
  methods: {
    addChartLabels () {
      debugger
      for (let submit of Object.values(this.submits)) {
        this.labels.push(submit.timestamp)
      }
    },
    addChartdataset () {
      for (let submit of Object.values(this.usersubmits)) {
        this.dataset.push(submit.usage)
      }
    }
  },
  created () {
    this.addChartLabels()
    this.addChartdataset()
  }
}
</script>

<style>
.check-usage {
  margin: 20px 20px 30px 20px;
  box-shadow: 0 4px 70px -18px #707070;
  padding: 10px;
}

.chart {
  padding: 10px;
}
</style>

Answer 1

所以 Dashboard 组件中的previousSubmits 是一个空数组：

export default {
  name: 'Dashboard',
  data () {
    return {
      currentUserData: {},
      previousSubmits: []
    }
  },

这就是作为userSubmitsProp 传递给chartusage 组件的内容：

    <chartusage :userSubmitsProp="previousSubmits" />

在该子组件的数据中也被称为submits：

  data () {
    return {
      submits: this.userSubmitsProp,

然后你的代码尝试在一个空数组上调用Object.values：

Object.values(this.submits)

顺便说一句，为组件提供属性的惯用方式是使用破折号而不是驼峰式：

    <chartusage :user-submits-prop="previousSubmits" />