javascript - 在 Udemy Wordpress 讲座之后 - Live Search Bar 破坏了我的代码

Question

所以我正在学习这个 udemy 类(class) https://www.udemy.com/course/become-a-wordpress-developer-php-javascript/我在这一点上我应该做一个实时搜索栏，但最终我得到一个错误，它根本没有意义

首先是我的错误:

Uncaught Error: Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\mathi\Local Sites\test-site-2\app\public\wp-content\themes\Test_site2\js\modules\Search.js: Unexpected token (59:12)

[0m [90m 57 | [39m[32m                      ${combinedResults.map(item => `<li><a href="${item.link}">${item.title.rendered}</a></li>`).join('')}  [39m[0m
[0m [90m 58 | [39m[32m                    ${combineResults.lenght ? '</ul>' : ''}`[39m)[33m;[39m[0m
[0m[31m[1m>[22m[39m[90m 59 | [39m            [33m<[39m[33m/[39m[33mdiv[39m[33m>[39m[0m
[0m [90m    | [39m            [31m[1m^[22m[39m[0m
[0m [90m 60 | [39m[0m
[0m [90m 61 | [39m      [33m<[39m[33mdiv[39m [36mclass[39m[33m=[39m[32m"one-third"[39m[33m>[39m[0m
[0m [90m 62 | [39m          [33m<[39m[33mh2[39m [36mclass[39m[33m=[39m[32m"search-overlay__section-title"[39m[33m>[39m[33mPrograms[39m[33m<[39m[33m/[39m[33mh2[39m[33m>[39m[0m
    at Parser.raise (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:6344:17)
    at Parser.unexpected (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:7659:16)
    at Parser.parseExprAtom (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:8828:20)
    at Parser.parseExprSubscripts (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:8413:23)
    at Parser.parseMaybeUnary (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:8393:21)
    at Parser.parseExprOps (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:8280:23)
    at Parser.parseMaybeConditional (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:8253:23)
    at Parser.parseMaybeAssign (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:8200:21)
    at Parser.parseExpression (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:8148:23)
    at Parser.parseStatementContent (C:\Users\mathi\Local Sites\test-site-2\node_modules\@babel\parser\lib\index.js:9917:23)
    at eval (webpack:///./app/public/wp-content/themes/Test_site2/js/modules/Search.js?:1:7)
    at Object../app/public/wp-content/themes/Test_site2/js/modules/Search.js (http://test-site-2.local/wp-content/themes/Test_site2/js/scripts-bundled.js?ver=0.29723500%201560950056:132:1)
    at __webpack_require__ (http://test-site-2.local/wp-content/themes/Test_site2/js/scripts-bundled.js?ver=0.29723500%201560950056:20:30)
    at eval (webpack:///./app/public/wp-content/themes/Test_site2/js/scripts.js?:9:73)
    at Module../app/public/wp-content/themes/Test_site2/js/scripts.js (http://test-site-2.local/wp-content/themes/Test_site2/js/scripts-bundled.js?ver=0.29723500%201560950056:144:1)
    at __webpack_require__ (http://test-site-2.local/wp-content/themes/Test_site2/js/scripts-bundled.js?ver=0.29723500%201560950056:20:30)
    at http://test-site-2.local/wp-content/themes/Test_site2/js/scripts-bundled.js?ver=0.29723500%201560950056:84:18
    at http://test-site-2.local/wp-content/themes/Test_site2/js/scripts-bundled.js?ver=0.29723500%201560950056:87:10

这是我的代码:(问题始于“getResults()”

import $ from 'jquery';

class Search {
  // 1. describe and create/initiate our object
  constructor() {
    this.addSearchHTML();
    this.resultsDiv = $("#search-overlay__results");
    this.openButton = $(".js-search-trigger");
    this.closeButton = $(".search-overlay__close");
    this.searchOverlay = $(".search-overlay");
    this.searchField =  $("#search-term");
    this.events();
    this.isOpenOverlayOpen = false;
    this.isSpinnerVisible = false;
    this.previousValue;
    this.typingTimer;

  }
  // 2. events
  events() {
    this.openButton.on("click", this.openOverlay.bind(this));
    this.closeButton.on("click", this.closeOverlay.bind(this));
    $(document).on("keydown", this.keyPressDispatcher.bind(this));
    this.searchField.on("keyup", this.typingLogic.bind(this))
  }

  // 3. methods (function, action...)
  typingLogic(){
    if(this.searchField.val() != this.previousValue){
      clearTimeout(this.typingTimer);

      if(this.searchField.val()){
        if(!this.isSpinnerVisible){
          this.resultsDiv.html('<div class="spinner-loader"></div>');
          this.isSpinnerVisible = true;
        }
        this.typingTimer = setTimeout(this.getResults.bind(this), 750);
      } else{
        this.resultsDiv.html('');
        this.isSpinnerVisible = false;
      }


    }

    this.previousValue = this.searchField.val()
  }


  getResults() {
    $.getJSON(testData.root_url + '/wp-json/test/v1/search?term=' + this.searchField.val(), (results) =>{
      this.resultsDiv.html(`
        <div class="row">
            <div class="one-third">
                <h2 class="search-overlay__section-title">General Information</h2>
                    ${combinedResults.length ? '<ul class="link-list min-list">' : '<p>No general information matches that search.</p>'}
                      ${combinedResults.map(item => `<li><a href="${item.link}">${item.title.rendered}</a></li>`).join('')}  
                    ${combineResults.lenght ? '</ul>' : ''}`);
            </div>

      <div class="one-third">
          <h2 class="search-overlay__section-title">Programs</h2>
      ${combinedResults.length ? '<ul class="link-list min-list">' : '<p>No general information matches that search.</p>'}
      ${combinedResults.map(item => `<li><a href="${item.link}">${item.title.rendered}</a></li>`).join('')}
          ${combineResults.lenght ? '</ul>' : ''}`);
          <h2 class="search-overlay__section-title">Professors</h2>
                    ${combinedResults.length ? '<ul class="link-list min-list">' : '<p>No general information matches that search.</p>'}
                      ${combinedResults.map(item => `<li><a href="${item.link}">${item.title.rendered}</a></li>`).join('')}  
                        ${combineResults.lenght ? '</ul>' : ''}`);
              </div>
              <div class="one-third">
              <h2 class="search-overlay__section-title">Campuses</h2>

              <h2 class="search-overlay__section-title">Events</h2>
              </div>

      keyPressDispatcher(e){
        if(e.keyCode == 83 && !this.isOpenOverlayOpen && !$("input, textarea").is(':focus')){
          this.openOverlay();
        }
        if(e.keyCode == 27 && this.isOpenOverlayOpen){
          this.closeOverlay();
        }
      }
      openOverlay(){
        this.searchOverlay.addClass("search-overlay--active");
        $("body").addClass("body-no-scroll");
        this.searchField.val('');
        setTimeout(()=> this.searchField.focus(), 301);
        this.isOpenOverlayOpen = true;
      }

      closeOverlay(){
        this.searchOverlay.removeClass("search-overlay--active");
        $("body").removeClass("body-no-scroll");
        this.isOpenOverlayOpen = false;
      }

      addSearchHTML(){$("body").append(`
    <div class="search-overlay ">
    <div class="search-overlay__top">
        <div class="container">
            <i class="fa fa-search search-overlay__icon" aria-hidden="true"></i>
            <input type="text" class="search-term" placeholder="What are you looking for?"
                   id="search-term">
            <i class="fa fa-window-close search-overlay__close" aria-hidden="true"></i>
        </div>
    </div>

    <div class="container">
        <div id="search-overlay__results"></div>
    </div>
</div>
                    `);


export default Search;

Answer 1

第 58 - 65 和 69 行 _ 'length' 的拼写错误

${combineResults.lenght ? '</ul>' : ''}`);

另外 _ 看起来整个字符串应该在第 58 行下方的一行终止

所以

${combineResults.lenght ? '</ul>' : ''}`);
            </div>

应该阅读

${combineResults.length ? '</ul>' : ''}
            </div>`);