时间戳

首页 > 解决方案 > Vue.js、VueX - 无法在组件中从 API 渲染数据

vue.js - Vue.js、VueX - 无法在组件中从 API 渲染数据

问题描述

我想对服务器进行 API 调用以获取数据，然后将它们显示在组件中。我有一个created()方法可以向我的商店发送一个动作，然后提交突变以使用我从服务器获得的数据更新我的商店。我也有computed方法，我只需调用从存储中获取数据的 getter。代码如下所示：

状态

state: { 
    data: { 
        rides: [] 
    }
 }

组件.vue

created() {
    this.$store.dispatch('fetchUserRides');
}
computed: {
    ...mapGetters([
        'userRides'
    ]),
}

store.js

//动作

fetchUserRides({ commit }) {
    axios.get('/api/stats/current_week')
        .then(response => {
            commit('fetchUserRides', response)
         })
        .catch(error => {
            commit('serverResponsError')
})

//突变...

fetchUserRides(state, payload){
    let rides = payload.data
    rides.forEach((item) => {
        state.data.rides.push(item)
})

//吸气剂

userRides: state => {
    let rides = state.data.rides
    rides.sort(( a, b) => {
        return new Date(a.date) - new Date(b.date);
    });
    return rides
}

我在响应中收到了 40 多个对象，我确实检查了它console.log(state.data.rides)，它们 100% 存在。

我的问题是，当我注销并重新登录时，它会引发错误"TypeError: Cannot read property 'sort' of null"。但如果我点击刷新，它们看起来很好。登录操作将我重定向到我呈现此组件的页面。这看起来像计算属性在实际填充到存储中之前首先尝试通过 getter 从数组中获取数据。如何确保在组件中获得对象数组？

标签： vue.jsvuex

解决方案

您可能需要将空数组 ( []) 设置为初始值，state.data.rides而不是null.

另一种选择是检查rides你的吸气剂是否真实。就像是：

 if (rides) {
   rides.sort(( a, b) => {
     return new Date(a.date) - new Date(b.date);
   });
  }
  return []

推荐阅读