Question

因此，当我尝试在浏览器中运行父组件“仪表板”时。子组件“ ChartUsage”在控制台中引发错误：ValueError: bad input shape (19405, 2)尝试调试时，我看到prop：userSubmitsProp，只返回一个空数组。所以这也很奇怪。但我不知道为什么。谁能帮我吗？

发送道具的父组件：userSubmitsProp：

[Vue warn]: Error in created hook: "TypeError: Cannot convert undefined or null to object"

接收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>

Answer 1

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

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

这就是作为userSubmitsProp传递到宪章的组成部分：

    <chartusage :userSubmitsProp="previousSubmits" />

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

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

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

Object.values(this.submits)

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

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

Vue：创建的挂钩中出现错误：“ TypeError：无法将未定义或null转换为对象”

1 个答案: