Привет, я работаю над реактивным проектом. в этом проекте я могу классифицировать книги по фиктивным данным, которые я создал, но не могу выполнить поиск по этому списку фиктивных данных
ошибка: {(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