Boa Tarde!
Criei um método chamado updateShelvesState
que é chamado antes do componente ser renderizado, e ao onChange
de um outro componente chamado Book
.
Esse método pega um array e cria um novo array organizado pela key shelf
de cada objeto que existe dentro do array.
Ao renderizar a página, quando chamo o método dentro de componentDidMount
, tudo ocorre bem.
Porém ao usar o mesmo método dentro de uma promise, ao onChange
do subcomponente Book
, recebo o seguinte erro:
Uncaught (in promise) TypeError: _this3.updateShelvesState is not a function
A função getAll
só retorna os dados da API.
Segue código:
import React, { Component } from "react";
import "./../App.css";
import { Link } from "react-router-dom";
import { getAll, update } from "../BooksAPI";
import Book from "./../components/Book";
class BookContainer extends Component {
state = {
shelves: []
}
componentDidMount() {
getAll()
.then(books => this.updateShelvesState(books))
.catch(error => console.log(error));
}
updateShelvesState(books) {
const booksGroupByShelf = books.reduce((newObj, book) => {
newObj[book.shelf] = newObj[book.shelf] || [];
newObj[book.shelf].push(book);
return newObj;
}, {})
const shelves = Object.keys(booksGroupByShelf).map(key => {
return { group: key, items: booksGroupByShelf[key] };
});
this.setState({ shelves });
}
onChangeShelf(book, shelf) {
update(book, shelf)
.then(getAll)
.then(data => this.updateShelvesState(data) )
}
render() {
const { shelves } = this.state;
return (
<div className="app">
<div className="list-books">
<div className="list-books-title">
<h1>MyReads</h1>
</div>
<div className="list-books-content">
<div>
{shelves.map((shelf, index) => {
return (
<div key={index} className="bookshelf">
<h2 className="bookshelf-title">{shelf.group}</h2>
<div className="bookshelf-books">
{shelf.items.length > 0 && (
<ol className="books-grid">
{shelf.items.map(item => (
<Book
key={item.id}
book={item}
onChangeShelf={this.onChangeShelf}
/>
))}
</ol>
)}
</div>
</div>
);
})}
</div>
</div>
<div className="open-search">
<Link to="/search">Add a book</Link>
</div>
</div>
</div>
);
}
}
export default BookContainer;
Muito obrigada pela atenção