如何解決解析錯誤：缺少分號？

Question

我是 React 的新手，我正在嘗試通過構建圖書列表 web 應用程序來學習。

保存我的代碼時，我在本地主機中得到以下信息：

編譯有問題：ERROR src/Components/BookList.js Line 2:5: Parsing error: Missing semicolon. (2:5)

有 BookList.js 文件：

import React from "react";
import Book from "./Book";
import "./BookList.css";
import { BookContext } from "../context/BookContext";
import { ThemeContext } from "../context/ThemeContext";

export default class BookList extends React.Component {
  render() {
    return (
      <ThemeContext.Consumer>
        {(contextTheme) => (
          <BookContext.Consumer>
            {(contextBook) => {
              const { books } = contextBook;

              const { changeColorTheme, isDarkMode, dark, light} = contextTheme;

              const theme = isDarkMode ? dark : light;

              return (
                <section className="page-section" style={{ backgroundColor: theme.bg, color: theme.color }} id="portfolio">
                  <div className="container">
                    <div className="text-right"><button className="btn btn-danger" onClick={changeColorTheme}>Change Mood</button></div>
                    <div className="text-center"><h2 className="section-heading text-uppercase">My Book Folio</h2><h3 className="section-subheading text-muted">subheading</h3></div>
                    <div className="row">
                      {books.map((book, index) => {
                        return <Book book={book} key={index} />;
                      })}
                    </div>
                  </div>
                </section>
              );
            }}
          </BookContext.Consumer>
        )}
      </ThemeContext.Consumer>
    );
  }
}

我查看了代碼，但看不到缺少的冒號。 我唯一的另一個想法是還有一些我沒有注意到的其他語法錯誤。

有沒有人對如何調試有任何想法或建議？

Answer 1

我重寫了返回語句中的代碼，web 應用程序運行了。 我試圖比較代碼，但是，我看不到原始問題出在哪里。

這是工作代碼的圖像

如果你弄明白了，請告訴我。 因為我很想知道原因是什么。