Vue 2：无法读取空值的属性 id

Question

我有一个订单列表，每个订单都可以单击以查看订单详细信息。

我花费了数小时的调试时间来尝试理解为什么 id 属性在登录页面上为空，但在商店和 api 调用函数中看起来很好。

最好的描述方式是通过代码，所以请看一下（请参阅 ID 仍然具有有效值的注释）。

-> 工作路线

 { path: '/vieworder/:id', component: ViewOrder, props: true },

-> 路由推送到详细信息页面：

methods: {
        ...mapActions(['getOrders']),
        init() {
            this.getOrders()
        },
        viewOrder: function(order){
            this.$router.push('/vieworder/' + order.id)
        }
    },

-> VIEWORDER.VUE（模板中的 ID 为空..）

    import * as types from '../store/mutationtypes'
    import { mapGetters, mapActions } from 'vuex'

    export default {
        name: 'ViewOrder',
        props: {
            id: {
                type: String,
                required: true
            }
        },
        created() {
            this.$store.dispatch('getOrderById', {
                id: this.id
            })
            console.log('The id is now : ' + this.id)
        },
        computed: {
            ...mapGetters(["order"])
        }
    }

<template>
    <div class="col-sm-10 col-sm-offset-1">
        <h4>{{ order.id }}</h4>
    </div>
</template>

--> 存储和 GETORDERBYID（此处 ID 值正确...）

export default new Vuex.Store({ 
state: {
    orders: [],
    order: null
},
getters: {
    orders: state => state.orders,
    order: state => state.order
},
actions: {
    getOrders({ commit }) {
        api.getOrders().then(orders => commit(types.UPDATE_ORDERS, orders))
    },
    getOrderById({ commit }, { id }){
        console.log("In Store now - Do we have an id ? : " + id)
        api.getOrderById(id).then(order => commit(types.UPDATE_ORDER, order))
    }, 
    etc.etc.etc...

--> API 调用返回数据

getOrderById(orderId){
    return axios.get('http://localhost:3000/Orders/' + orderId)
 .then(response => response.data)   
},

--> 从 API CALL

返回的示例数据

"Orders": [
{
  "id": 123456,
  "PaidDate": "2017-01-12",
  "AppId": "KLM-UXI-NIX-FIX",
  "TicketType": "Barn - Enkeltbillett",
  "TicketCount": 1,
  "OrderSum": "17",
  "MediaChannel": "Android",
  "StatusCode": "08-12-34-56-78",
  "PaymentOption": "VISA"
},

--> 错误

Answer 1

可以尝试在vuex中将getOrderById({ commit }, { id })改为getOrderById({ commit }, id)，在mounted()hook中调用this.$store.dispatch('getOrderById', id)，如果订单为空。

您也可以像这样检查订单是否存在<div class="col-sm-10 col-sm-offset-1" v-if="order.id">以避免在获取数据之前出错。

Answer 2

这不是针对OP具体情况的回答，而是针对问题标题的回答。我从 vuejs "Cannot read property id of null" 或 "Cannot read property id of undefined".

收到了相同的控制台错误消息

我最终解决了这个问题，方法是检查我所有的代码并确保 "x.id" 的每次使用都在 "if (x)" 这样的块中。例如，如果在 vue 组件的 "props" 中设置了 "x"，看起来下面的代码可能会失败 "Cannot read property id of undefined":

<div v-for="y in x" :key="y.id">
  {{ y.name }}
</div>

解决方案是将其包装在 v-if 块中，如下所示：

<div v-if="x">
  <div v-for="y in x" :key="y.id">
    {{ y.name }}
  </div>
</div>

同样，在计算的属性中，看起来以下可能会失败：

computed: {
  sumids: function () {
    var finalsum = 0
    for (var y of this.x) {
      finalsum += y.id
    }
    return finalsum
  }
},

解决方案是将其包装在一个 if 块中，如下所示：

computed: {
  sumids: function () {
    var finalsum = 0
    if (this.x) {
      for (var y of this.x) {
        finalsum += y.id
      }
    }
    return finalsum
  }
},

Vue 2：无法读取空值的属性 id

Vue 2 : Cannot read property id of null

vue.js

vuejs2

vue-router

vuex

Vue 2：无法读取空值的 属性 id

Vue 2 : Cannot read property id of null

vue.js

vuejs2

vue-router

vuex

Vue 2：无法读取空值的属性 id