javascript - JS - 搜索栏不返回任何内容

Question

我目前正在学习 Jonas Schmedtmann 的课程。当我通过一个使用 ES6、Babel、NPM 和 WebPack 的项目时，我偶然发现了一个问题。我们编写了一个异步函数，它从 API 返回数据，每当单击搜索栏中的按钮时，它应该 console.log() 来自给定关键字的服务器数据。

但是，就我而言，这就是发生的事情。API 为您提供了两种在搜索栏中输入的选项：“pizza”和“pasta”。如果我输入其他内容，它（如预期的那样）会发出错误警报。另一方面，如果我输入“pizza”或“pasta”，则没有任何反应。但是，它应该 console.log 指定关键字的数据。

我多次检查了我的代码，一切似乎都很好，控制台和 VSC 中都没有错误。我检查了标签、文件以及我的逻辑是否正确——什么都没有。我只是无法弄清楚问题出在哪里。你能帮我解决这个问题吗？

下面我将包括源代码和目录：

我将这个 webpack 命名为，因为这是我第一次运行 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();
});

这几乎是应用程序的核心，它从其他较小的辅助文件中导入数据——我们的讲师希望为应用程序的每个组件分别创建一个文件，然后将所有内容导入 index.js。

模型/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 并从中获取选择的查询/数据。

意见/searchView.js

import { elements } from './base';

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

意见/base.js

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

索引.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 请求未定义查询的结果）

标签： javascriptnode.jswebpack