javascript - 我的 BooksAPI 无法在我的代码中解析？

Question

我正在尝试解决这个问题，但我没有找到解决方案，因为我相信我的实现是正确的。我正在为图书阅读网络编写代码，其中包含我读过的、想读的和正在读的书。在搜索页面中，我获取数据库中的所有书籍，然后搜索一本书，然后将该书添加到我的书架中。我已经实现了该功能，但由于某种原因，我不断收到相同的错误 ./src/Components/Search.js Module not find: Can't parse './src/BooksAPI'

这是我的代码:

import React from 'react'
import * as BooksAPI from './src/BooksAPI'
import escapeRegExp from 'escape-string-regexp'
class Search extends React.Component {
state = {
  query: '',
  allBooks: [],
  booksToSearch: []
 }
 handleChange = (query) => {
 this.setState({query: query });
 }
 componentDidMount = () => {
 BooksAPI.getAll()
  .then((response) => {
    this.setState({allBooks: response}
    );
  });
 }
 render() {
 const booksOnShelves = this.props.booksOnShelves;

 if (this.state.allBooks){
  for (const book in this.allBooks){
    for (const aBook in booksOnShelves){
      if (book.id !== aBook.id){
          this.state.booksToSearch.push(book.id);
      }
    }
  }
}
let showingBooks
if (this.state.query){
  const match = new RegExp(escapeRegExp(this.state.query), 'i')
  showingBooks = this.booksToSearch.filter( (book)=> match.test(book.title))
} else {
  showingBooks = this.state.allBooks;
 }
 return(
  <div className="search-books">
    <div className="search-books-bar">
      <button className="close-search" onClick={() => 
       this.props.showHomePage(false)}>Close</button>
      <div className="search-books-input-wrapper">
        <input type="text" placeholder="Search by title or author" value= 
         {this.state.query} onChange={ event => 
           this.handleChange(event.target.value)}/>
      </div>
    </div>
    <div className="search-books-results">
    <ol className="books-grid">
    {showingBooks.map( book=> (
      <li key={book.id}>
        <div className="book">
          <div className="book-top">
            <div className="book-cover" style={{
               width: 128,
               height: 193,
               backgroundImage: `url(${book.imageLinks.thumbnail})`
             }}>
             </div>
             <div className="book-shelf-changer">
               <select onChange={ event => this.props.moveBook(book, 
                  event.target.value)}>
                 <option value="move" disabled>Move to...</option>
                 <option value="currentlyReading">Currently Reading</option>
                 <option value="wantToRead">Want to Read</option>
                 <option value="read">Read</option>
                 <option value="none">None</option>
               </select>
             </div>
          </div>
          <div className="book-title">{book.title}</div>
          <div className="book-authors">{book.authors}</div>
        </div>
      </li>
    ))}
      </ol>
    </div>
  </div>
   )
  }
 }
 export default Search

拜托，我需要帮助!我已检查以确保 json 文件位于我导入的同一文件夹中。但我的代码不起作用!我相信这是唯一的问题。

P.s 我的代码没有缩进问题!

Answer 1

这是您的目录结构和导入语句的问题。您正在使用的文件位于:

/src/Components/Search.js

并且您正在尝试导入位于以下位置的文件:

/src/BooksAPI

但是“.”字符表示从当前目录开始，因此您的导入语句所做的是尝试导入位于以下位置的文件:

/src/Components/src/BooksAPI

我猜你的项目中可能不存在。如果您将导入语句更改为:

import * as BooksAPI from '../BooksAPI'

“..”代表执行导入的当前源文件的上一级目录。