Question

我正在学习如何使用Webpack，以及何时尝试在按键事件上执行代码

我遇到以下错误：

main.js：1未捕获的TypeError ：（中间值）.getUser不是函数在HTMLInputElement。@Where()

您可以在下面看到两个模块，index.js用作捆绑的起始文件：

HTML代码

<anonymous>

Index.js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="./style.css">
</head>
<body>
   <div class="container-fluid">
       <header class="header">
           <div class="header--title-box"><h3 class="header--title  ">GitHub Finder</h3></div>

            <div class="header--inputBox">
<h1>Search GitHub Users</h1>
<p>Enter username</p>

<input type="text" class="header--input" placeholder="GitHub Username...">
            </div>
       </header>
       <main>
           <div class="container">
           <div class="profile"></div>
        </div>
       </main>

       <footer>Copyright 2018</footer>
   </div>

   <script src="./dist/main.js"></script>
</body>
</html>

GitHub模块

import {GitHub} from "./gitHub";
let input = document.querySelector('.header--input');

input.addEventListener('keyup', function(e){
    let inputValue = this.value;

    if(inputValue!==''){
        GitHub.getUser(inputValue)
        .then(data=>{
            if(data.data.message==="Not Found"){
                alert("Nothing found")
            }else{
                UI.showProfile(data.data);
                UI.showRepos(data.reposJson)
            }
        })

    }else{
        UI.clearProfile();
    }
})

Answer 1

这与WebPack无关。

getUser是一个类方法。

在GitHub的实例中似乎不是GitHub的构造函数。

const github = new GitHub();
github.getUser(inputValue)

由于github对象似乎没有在内部存储任何数据，因此不清楚为什么首先要使用类。改用普通对象可能会更好。

export const github = {
    clientID: '6ea9567c0f22d48fb20e',
    clientSecret: 'a4ec6e6b2040ddd5d197079014f8a4e0fb7fe839',
    repos_count: 5,
    repos_sort: 'created: asc',
    async getUser(user) {
        let response = await fetch(`https://api.github.com/users/${user}?clientID=${this.clientID}&clientSecret=${this.clientSecret}`);
        let repoResponse = await fetch(`https://api.github.com/users/${user}/repos?per_page=${this.repos_count}&sort=${this.repos_sort}?clientID=${this.clientID}&clientSecret=${this.clientSecret}`);
        let parsedJson = await response.json();
        let reposJson = await repoResponse.json();
        return {
            data: parsedJson,
            reposJson
        }
    }
}

面对main.js：1未捕获的TypeError：（中间值）.getUser在HTMLInputElement上不是函数。<匿名>

1 个答案: