时间戳

首页 > 解决方案 > 我的 BooksAPI 无法在我的代码中解析？

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

问题描述

我正在尝试解决这个问题，但我没有找到解决方案，因为我相信我的实现是正确的。我正在为阅读网络的书籍编写代码，其中将包含我阅读、想要阅读和阅读的书籍。在搜索页面中，我获取数据库中的所有书籍，然后搜索一本书，然后将该书添加到我的书架上。我已经实现了该功能，但由于某种原因，我不断收到相同的错误，即./src/Components/Search.js Module not found: Can't resolve './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 文件位于我从中导入的同一文件夹中。但是我的代码不起作用！我相信这是唯一的问题。

Ps 我的代码没有缩进问题！

标签： javascriptjsonreactjs

解决方案

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

/src/Components/Search.js

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

/src/BooksAPI

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

/src/Components/src/BooksAPI

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

import * as BooksAPI from '../BooksAPI'

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

推荐阅读