[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading '0')"

Question

Выдает ошибку при получении данных из сервера. Данные выводятся на экран. При выводе массива данных в консоль, получаю сначала пустой массив, потом массив с данными. На странице есть сортировка.

Пока массив данных лежал в stor, все работало. Проблема появилась после получения данных с сервера

Вот мой код. Буду благодарна любой помощи.

//store

state: {
 users: [],
 searchQuery: '',
 selectedNameEmail: '',
 sortNameEmails: [
        {value: 'surname', name: 'Sorts name', icon: 'mdi-sort-alphabetical-ascending'},
        {value: 'email', name: 'Sorts email', icon: 'mdi-email-outline'},
   ],
}
getters: {
     sortedUsers(state) {
         return [...state.users].sort((user1, user2) => {
             return user1[state.selectedNameEmail.value]?.localeCompare(user2[state.selectedNameEmail.value]);
         });
     },
     sortedAndSearchedUsers(state, getters) {
         let arr = getters.sortedUsers
         arr.splice(getters.sortedUsers.length -1)
         return arr.filter(user => user.surname.toLowerCase().includes(state.searchQuery.toLowerCase()));
     },   
}

//component Select

<MySelect
   :selected.sync="$store.state.userModule.selectedNameEmail"
   :options="sortNameEmails"
   :selectDefault="selectDefault"
   :iconDefault="iconDefault"
   @change="selectedNameEmail"
>
 <div>
   <v-icon
       class="text-h5 iconSelect"
       left
   >
     {{ selectedNameEmail.icon }}
   </v-icon>
   {{ selectedNameEmail.name }}
 </div>
</MySelect>

<script>
import MySelect from "@/UI/MySelect";
import {mapGetters, mapMutations, mapState} from "vuex";
export default {
name: 'selected-name-email',
components: {MySelect},
model: {
 prop: 'modelValue',
 event: 'change'
},
data: () => ({
 selectDefault: 'Sorts Users',
 iconDefault: 'mdi-sort'
}),
methods: {
 ...mapMutations({
   setSelectedNameEmail: 'userModule/setSelectedNameEmail',
 }),
},
computed: {
 ...mapState({
   selectedNameEmail: state => state.userModule.selectedNameEmail,
   sortNameEmails: state => state.userModule.sortNameEmails,
 }),
 ...mapGetters({
 }),
 selectName() {
   return this.$store.state.userModule.selectedNameEmail
 }
},
}
</script>

//component
     <Select/>
     <UsersList
         :users="sortEndSearchedUsers"
         v-if="!isUsersLoading"
     />

<script>
import UsersList from "@/components/UsersList";
import {mapState, mapGetters, mapMutations} from 'vuex'
import SelectedSortsSelected from "@/components/sortsAndSearch/SelectedSortsSelected";
import ToolBar from "@/components/bars/ToolBar";
export default {
name: 'users-with-store',
components: {
 ToolBar,
 SelectedSortsSelected,
 UsersList,
},
data() {
 return {
   component: 'SelectedNameEmail'
 }
},
methods: {
 ...mapMutations({
   setSelectedNameEmail: 'userModule/setSelectedNameEmail',
 })
},
computed: {
 ...mapState({
   // searchQuery: state => state.userModule.searchQuery,
   // isUsersLoading: state => state.userModule.isUsersLoading,
   selectedNameEmail: state => state.userModule.selectedNameEmail,
   users: state => state.userModule.users
 }),
 ...mapGetters({
   sortedAndSearchedUsers: 'userModule/sortedAndSearchedUsers',
   sortEndSearchedUsers: 'userModule/sortEndSearchedUsers'
 }),
},
watch: {}
}
</script>

Answer 1

mutations: {
        loadUsers(state, payload) {
            state.users = payload
        },
},
 actions: {
        async fetchUsers({commit}) {
            try {
                commit('setIsUsersLoading', true);
                const db = getDatabase();
                return onValue(ref(db, 'users/'), (snapshot) => {
                    const users = snapshot.val()

                    const usersArray = []
                    Object.keys(users).forEach(key => {
                        const u = users[key]
                        usersArray.push(
                            new User(
                                u.surname,
                                u.firstname,
                                u.username,
                                u.email,
                                u.realm,
                                u.password,
                                u.date,
                                u.time,
                                u.id,
                            )
                        )
                    })
                    commit('loadUsers', usersArray)
                }, {onlyOnce: true})
            } catch (e) {
                // alert('▓ Bad internet connection! Try later ▓')
                console.log(e)
                throw e
            } finally {
                commit('setIsUsersLoading', false);
            }
        },

Добавила action ...извините, первый раз задаю вопрос)

Answer 2

так я получаю данные в компоненте

methods: {
    ...mapActions({
      fetchUsers: "userModule/fetchUsers",
    }),
},
 computed: {
    ...mapState({
      users: state => state.userModule.users,
    }),
 },
  async mounted() {
    await this.fetchUsers()
  },

БЛОГ НА HUSL

[Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading '0')"

Ответы (2 шт):