我的BooksAPI无法在我的代码中解析?

时间:2018-11-28 00:15:30

标签: javascript json reactjs

我正在尝试解决此问题,但是我没有找到解决方案,因为我认为我的实现是正确的。我正在为读书网络编写代码,该网络将包含我已经阅读,想要阅读和阅读的书籍。在搜索页面中,我获取数据库中的所有书籍,然后搜索书籍,然后将其添加到书架中。 我已经实现了该功能,但是由于某种原因,我不断遇到相同的错误,./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文件位于我要从中导入的同一文件夹中。但是我的代码不起作用!我相信这是唯一的问题。

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

1 个答案:

答案 0 :(得分:1)

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

import pandas as pd
df=pd.read_csv('국민 시력 통계.csv', header=0) # If csv has header or None
print('dataframe shape:', df.shape)
df.head() # Look first five rows to get a rough understanding
df=df.drop(columns=['9.9']) # Not sure though works if your columnname 9.9

,您正尝试导入位于以下位置的文件:

/src/Components/Search.js

但是“。”字符说要从当前目录开始,所以您的导入语句要做的是尝试导入位于以下位置的文件:

/src/BooksAPI

我想这可能在您的项目中不存在。如果将import语句更改为:

/src/Components/src/BooksAPI

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