1

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

1 Resposta 1

1

Tens de fazer bind à classe em que estás, para o método correr no contexto/this correto.

Muda

onChangeShelf={this.onChangeShelf}

para

onChangeShelf={this.onChangeShelf.bind(this)}
2
  • 1
    Beleza @Sergio, obrigada! Commented 8/11/2017 às 19:21
  • @AlineVianna de nada
    – Sergio
    Commented 8/11/2017 às 19:21

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .