Асинхронный вызов JS печатается нормально, но выдает ошибку undefined
Я борюсь с асинхронными вызовами, и я понял, что на этот вопрос уже много раз отвечали, но я пробовал многие из предложенных подходов и не добился успеха, поэтому я был бы очень признателен, если бы кто-то мог мне помочь. Также хочу отметить, что в последнее время я очень сильно прогрессирую, но считаю себя новичком.
У меня есть асинхронный вызов базы данных (в файле controller.js), который должен вернуть все игры из таблицы Games и сохранить их в переменной allGames типа Array:
async getAllGames ({ request, response }) {
const allGames = await Game.all()
return response.json({
status: 'success',
data: allGames
})
}
При загрузке страницы выполняется функция fetchAllGames:
created () {
this.fetchAllGames(this.myCallback)
},
methods: {
myCallback (response) {
this.allGames = response
},
fetchAllGames (callback) {
axios
.get('/fetch_games')
.then(response => {
callback(response.data.data)
})
}
}
Вроде все хорошо, и здесь я должен отметить, что использую VueJS.
Когда я пытаюсь напечатать "allGames", используя
{{ allGames }}
он работает как положено, показывая массив всех игр из базы данных.
Если я попробую
{{ allGames[1] }}
Получаю вторую игру, тоже как положено.
Если я попробую
{{ allGames[1].id }}
Получаю ID второй игры с горячей перезагрузкой. Теперь, если я вручную перезагружу страницу, даже если идентификатор все еще отображается на странице, я получаю
[Vue warn]: Error in render: "TypeError: _vm.allGames[1] is undefined"
в консоли.
Моя проблема в том, что мне нужно передать allGames другому компоненту, и сейчас я передаю undefined.
Я очень ценю, если кто-нибудь из вас может пролить на меня немного света. Я уже какое-то время борюсь и пробовал много разных подходов. У меня такой же код в другом компоненте, и он, кажется, работает нормально. Я уверен, что что-то упускаю
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Если вы используете {{ allGames[1].id }}, VueJS мгновенно пытается отобразить идентификатор первого элемента, который еще не существует, когда вы изначально визуализируете свою страницу, потому что данные все еще загружаются в фоновом режиме.
Вам нужно либо использовать директиву v-for, либо охранять рендеринг {{ if allGames.length ? allGames[1].id : '' }}
Что касается горячей перезагрузки: горячая перезагрузка работает иначе, чем обновление страницы. Я не эксперт, но предполагаю, что данные VueJS не очищаются должным образом при горячей перезагрузке частей сайта.
Попробовал {{ allGames.length ? allGames[1].id : '' }} и снова получил точно такой же результат.
Нет. Я предположил, что это массив, и вы хотите перебрать его. Может быть, попробуйте {{ allGames.length > 1 ? allGames[1].id : '' }}, так как вы пытаетесь получить доступ ко второму элементу.
Кроме того, если данные все еще загружаются при визуализации страницы, как можно распечатать массив? Я имею в виду, что даже allGames[1].id печатает нормально, но я получаю сообщение об ошибке, и данные отправляются как undefined в дочерний компонент. Я также не могу понять, почему, когда я использую allGames[1], он не выдает мне ошибку, а когда я использую allGames[1].id, он появляется, но говорит, что allGames[1] не определен (без id).
Хорошо, используя ваше последнее предложение, я получил кое-что другое: на этот раз я все еще получил ту же ошибку, но данные были переданы правильно.
Совершенно уверен, что это связано с тем, что неопределенные значения печатаются как пустые строки, но если вы обращаетесь к id на неопределенном объекте, JavaScript выдает вам ошибку. У вас есть allGames, определенный в сегменте data () вашего родительского компонента?
Я еще немного поиграю с этими параметрами и вернусь сюда. Большое спасибо за твою помощь.
Да, это правильно определено.
Хорошо. Затем попробуйте использовать наблюдатель на allGames в своем дочернем компоненте, а console.info - в качестве входных данных для этого наблюдателя.
Не уверен, что вы имеете в виду: я пробовал watch: { allGames: function(){ console.info (this.allGames) } }
Еще одно: если у меня <p>{{ allGames[1].id }}</p>, результат передается ребенку правильно. Если я просто прокомментирую эту строку, она будет передана как неопределенная, даже если я добавлю, например, {{ allGames.length > 1 ? allGames[1].id : '' }}
Возможно ли создать jsfiddle? Очень сложно следить за тем, что происходит.
Не знаю, как бы я это сделал, чтобы он мог обращаться к базе данных и иметь несколько компонентов. Посмотрим. В любом случае спасибо за вашу помощь
Когда я вернулся, чтобы проверить, проблемы больше не было. Полагаю, я случайно изменил другую часть кода, исправляющую эту проблему. Спасибо за вашу помощь.
Я думаю, вы имеете в виду директиву
v-if. Я пробовал использоватьv-if = "allGames.length"и получил тот же результат.