JS - панель поиска ничего не возвращает

Question

Я сейчас прохожу курс Йонаса Шмедтмана. Когда я работал над проектом с использованием ES6, Babel, NPM и WebPack - я наткнулся на проблему. Мы кодировали асинхронную функцию, которая возвращает данные из API, всякий раз, когда нажимается кнопка на панели поиска, она должна console.log () получать данные с сервера по данному ключевому слову.

Однако, в моем случае это то, что происходит. API дает вам два варианта ввода в строке поиска: «пицца» и «паста». Если я ввожу что-то еще, оно (как и ожидалось) предупреждает об ошибке. Если, с другой стороны, я набираю «пиццу» или «пасту», ничего не происходит. Но, он должен console.log данных для указанного ключевого слова.

Я просмотрел свой код несколько раз, и все, кажется, в порядке, без ошибок ни в консоли, ни в VS C. Я проверил теги, файлы и, если мой лог c прав - ничего. Я просто не могу понять, в чем проблема. Можете ли вы помочь мне с этой проблемой?

Ниже я приведу исходные коды и каталоги:

Я назвал этот веб-пакет, потому что я впервые запустил npm, webpack, babel и просто продолжал работать над проектом в этой папке. Игнорируйте имя папки.

Вот код:

index. js

import Search from './models/search';
import * as searchView from './views/searchView';
import { elements } from './views/base';

/* global sstate of the app
 * - search object
 * - current state of object
 * - shopping list object
 * - liked recipes
 */
const state = {};

const controlSearch = async () => {
    // 1) get query from view
    const query = searchView.getInput(); 
    console.log(query);//TO DO

    if (query) {
        // 2) new search object and add it to state
        state.search = new Search(query);

        // 3) Prepare UI for results

        // 4) Search for recipes

        await state.search.getResults();
        // 5) render results on UI
        console.log(state.search.result);
    }
}

elements.searchForm.addEventListener('submit', e => {
    e.preventDefault();
    controlSearch();
});

Это в значительной степени ядро ​​приложения , который импортирует данные из других меньших сторонних файлов - наш инструктор хочет создать файл для каждого компонента приложения отдельно, а затем импортировать все в индекс. js.

models / search. js

import axios from 'axios';

    export default class Search {
        constructor(query){
        this.query=query;
    }

    async getResults(){
        try{
            const res = await axios(`https://forkify-api.herokuapp.com/api/search?&q=${this.query}`);
            this.result = res.data.recipes;

        }catch(error){
            alert(error);
        }
    }
}

этот код в значительной степени связан с API и получает от него выбранный запрос / данные.

views / searchView. js

import { elements } from './base';

export const getInput = () => elements.searchInput.value;

просмотров / база. js

    export const elements = {
    searchForm: document.querySelector('.search'),
    searchInput: document.querySelector('.search__field')
};

index. html

        <form class="search">
            <input type="text" class="search__field" placeholder="Search over 1,000,000 recipes...">
            <button class="btn search__btn">
                <svg class="search__icon">
                    <use href="img/icons.svg#icon-magnifying-glass"></use>
                </svg>
                <span>Search</span>
            </button>
        </form>

и выше HTML в строке поиска

Наконец, я хотел показать консоль после правильного ввода пиццы и " pizzzza "целенаправленно с ошибкой, чтобы показать, как это выглядит. (Я могу ошибаться, но я думаю, что эти предупреждения и ошибки являются нормальными , за исключением последнего, который был результатом запроса неопределенного запроса от API)