Question

我目前正在参加乔纳斯·施密特曼（Jonas Schmedtmann）的课程。在进行使用ES6，Babel，NPM和WebPack的项目时，我偶然发现了一个问题。我们编写了一个异步函数，该函数从API返回数据，每当单击搜索栏中的按钮时，它都应使用给定关键字console.log（）来自服务器的数据。

但是，就我而言，这就是发生的情况。该API为您提供了两种输入搜索栏的选择：“披萨”和“意大利面”。如果我输入其他内容，它（预期）会提示错误。另一方面，如果我输入“ 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。

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;

views / base.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>

，上面是搜索栏的

最后，我想在正确输入披萨后故意显示控制台，并故意输入“ pizzzza”并显示错误，以显示外观。（我可能是错的，但是我认为这些警告和错误是正常的，除非是由于从API请求未定义的查询而导致的警告和错误）

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

0 个答案: