Не в состоянии искать через mockData - PullRequest
0 голосов
/ 13 апреля 2020

Привет, я работаю над реактивным проектом. в этом проекте я могу классифицировать книги по фиктивным данным, которые я создал, но не могу выполнить поиск по этому списку фиктивных данных

ошибка: {(TypeError: _this5.props.onSearch не является функцией), которая находится в компоненте SearchBooksInput}

1) ниже находится файл моего приложения. js файл (мои фиктивные данные находятся в getAll, который находится в файле данных) '' 'import React, {Component} из' response '; import {Route, Link} из'act-router-dom ';

import './App.css';
import {bindActionCreators} from 'redux';
import getAll from "./data";
import {connect} from 'react-redux';

import {selectUser} from './actions/index'


 class BooksApp extends Component {
 bookshelves = [
  { key: 'currentlyReading', name: 'Currently Reading' },
 { key: 'wantToRead', name: 'Want to Read' },
 { key: 'read', name: 'Read' }
 ];
 state = {
 books: getAll,
 searchBooks: []
 };
 moveBook = (book, shelf) => {
 const updatedBooks = this.state.books.map(b => {
  if (b.id === book.id) {
    b.shelf = shelf;
  }
  return b;
 });
 this.setState({
  books: updatedBooks
 });
 };
 searchForBooks = query => {
 console.log(query);
 getAll.search(query).then(books => {
  this.setState({ searchBooks: books });
  });
  };
  resetSearch = () => {
  this.setState({ searchBooks: [] });
   };

  renderList() {
  return this.props.users.map((books) => {
    return (
        <div
            key={books.id}

            onClick={() => this.props.selectUser(books)}
        >
            <br/>
    <br/>
             <br/>

        </div>
    );
  });
  }

  render() {
  const { books, searchBooks } = this.state;
  return (
  <div className="app">

    <Route
      exact
      path="/"
      render={() => (
        <ListBooks
          bookshelves={this.bookshelves}
          books={books}
          onMove={this.moveBook}
        />
      )}
    />
    <Route
      path="/search"
      render={() => (
        <SearchBooks
          searchBooks={searchBooks}
          books={books}
          onSearch={books}
          onMove={this.moveBook}
          onResetSearch={this.resetSearch}
        />
      )}
    />
  </div>
  );
  }
  }
  function mapStateToProps(state) {
  return {
  books: state.books
  };
  }

  function matchDispatchToProps(dispatch){
  return bindActionCreators({selectUser: selectUser}, dispatch);
  }




  class SearchBooks extends Component {
  render() {
  const { books, onSearch, onResetSearch, onMove, searchBooks } = this.props;
  console.log(books);
  return (
  <div className="search-books">
    <SearchBar onSearch={onSearch} onResetSearch={onResetSearch} />
    <SearchResults
      books={books}
      onMove={onMove}
      searchBooks={searchBooks}
    />
  </div>
  );
  }
  }


  const SearchBar = props => {
  const { onSearch, onResetSearch } = props;
   return (
  <div className="search-books-bar">
  <CloseSearchButton onResetSearch={onResetSearch} />
  <SearchBooksInput onSearch={onSearch} />
  </div>
  );
  };

  const CloseSearchButton = props => {
  const { onResetSearch } = props;
  return (
  <Link to="/">
  <button className="close-search" onClick={onResetSearch}>
    Close
  </button>
  </Link>
  );
  };

  class SearchBooksInput extends Component {
  state = {
   value: '',
   books:getAll
   };
  handleChange = event => {
  const val = event.target.value;
  console.log(val)
  this.setState({ value: val }, () => {
  this.props.onSearch(val).bind(this);
   });
  };
  render() {
  return (
  <div className="search-books-input-wrapper">
    <input
      type="text"
      value={this.state.value}
      books={this.state.books}
      placeholder="Search by title or author"
      onChange={this.handleChange}

    />
    </div>
    );
    }
    }


   const SearchResults = props => {
   const { books, searchBooks, onMove } = props;
   const updatedBooks = searchBooks.map(book => {

   books.map(b => {
   if (b.id === book.id) {
    book.shelf = b.shelf;
   }
   console.log(books)
   return b;
    });
   return book;
   });
   return (
   <div className="search-books-results">
   <ol className="books-grid">
    {updatedBooks.map(book => (
      <Book
        key={book.id}
        book={book}
        shelf={book.shelf ? book.shelf : 'none'}
        onMove={onMove}
      />
    ))}
   </ol>
   </div>
   );
   };
   export default connect(mapStateToProps, matchDispatchToProps) 
   (BooksApp);

2) файл getAll содержит фиктивные данные

    const getAll = [
    title: 'React',
   authors: ['Nils Hartmann', 'Oliver Zeigermann'],
   imageLinks: {
    thumbnail:
    'http://books.google.com/books/content? 
   id=IOejDAAAQBAJ&printsec=frontcover&img=1&zoom=1&source=gbs_api',
   },
   id: 'IOejDAAAQBAJ',
   shelf: 'read',
   },
   {
   title: 'Satire TV',
    authors: ['Jonathan Gray', 'Jeffrey P. Jones', 'Ethan Thompson'],
   imageLinks: {
   thumbnail:
    'http://books.google.com/books/content?id=1wy49i- 
   gQjIC&printsec=frontcover&img=1&zoom=1&edge=curl&source=gbs_api',
   },
   id: '1wy49i-gQjIC',
   shelf: 'read',
   },
   ]
   export default getAll;

3) ссылку для github https://github.com/Prashant1304/books

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...