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

我试图解决这个问题，但我没有找到解决方案，因为我相信我的实现是正确的。我正在为图书阅读网站编写代码，该网站将有我读过、想读和阅读的书籍。在搜索页面中，我获取数据库中的所有书籍，搜索一本书，然后将该书添加到我的书架上。 我已经实现了该函数，但由于某些原因，我不断收到相同的错误，即未找到

/src/Components/Search.js模块：无法解析“./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

从“React”导入React
从“/src/BooksAPI”导入*作为BooksAPI
从“转义字符串regexp”导入转义表达式exp
类搜索扩展了React.Component{
状态={
查询：“”，
所有书籍：[]，
图书搜索：[]
}
handleChange=（查询）=>{
this.setState（{query:query}）；
}
componentDidMount=（）=>{
BooksAPI.getAll（）
。然后（（响应）=>{
this.setState（{allBooks:response}
);
});
}
render（）{
const booksOnShelves=this.props.booksOnShelves；
如果（此.state.allbook）{
for（此.allBooks中的const book）{
用于（书架上的const aBook）{
if（book.id！==aBook.id）{
this.state.booksToSearch.push（book.id）；
}
}
}
}
让我们来看看书
if（this.state.query）{
const match=new RegExp（escapeRegExp（this.state.query），'i'）
showingBooks=this.booksToSearch.filter（（book）=>match.test（book.title））
}否则{
showingBooks=this.state.allBooks；
}
返回(
this.props.showHomePage（false）}>Close
this.handleChange（event.target.value）}/>
{showingBooks.map（book=>(

这个。道具。动作书（书，
event.target.value）}>
搬到。。。
正在阅读
想读书吗
阅读
没有一个
{书名}
{book.authors}

))}
)
}
}
导出默认搜索

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

---

我的代码没有缩进问题

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

/src/Components/Search.js

/src/BooksAPI

/src/Components/src/BooksAPI

您正在尝试导入位于以下位置的文件：

/src/Components/Search.js

/src/BooksAPI

/src/Components/src/BooksAPI

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

/src/Components/Search.js

/src/BooksAPI

/src/Components/src/BooksAPI

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

import * as BooksAPI from '../BooksAPI'

---

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

能否包括

BooksAPI

文件的内容及其文件类型？