使用setState更新书架

首先你得把书从现在的书架上取下来。然后把书放在右边的书架上。

你可以改变 changeShelf 以下内容:

getShelfWithoutBook(shelf, book) {
    return shelf.filter(item => item !== book);
}

changeShelf(book, shelf) {
    this.setState({
        currentlyReadingBooks: this.getShelfWithoutBook(this.state.currentlyReadingBooks, book),
        wantToReadBooks: this.getShelfWithoutBook(this.state.wantToReadBooks, book),
        readBooks: this.getShelfWithoutBook(this.state.readBooks, book)
    });
    if (shelf === 'currentlyReading') {
      this.setState({
        currentlyReadingBooks: this.state.currentlyReadingBooks.push(book)
      });
    } else if (currentShelf === 'wantToRead') {
      this.setState({
        wantToReadBooks: this.state.wantToReadBooks.push(book)
      });
    } else if (currentShelf === 'read') {
      this.setState({
        readBooks: this.state.readBooks.push(book)
      });
    }
}

这可能可以写得少很多重复,但我希望这样更容易理解。

编辑:或者你可以重新使用你的 collectBooks

changeShelf(book, shelf) {
    // collect all books in one list:
    const books = [
        ...this.state.currentlyReadingBooks, 
        ...this.state.wantToReadBooks, 
        ...this.state.readBooks
    ];
    // remove the book you want to change: 
    const booksWithoutThisBook = books.filter(item => item !== book);
    // update the shelf of the current book:
    book.shelf = shelf;
    // re-add the changed book:
    const booksWithUpdatedBook = [...booksWithoutThisBook, book];
    // re-run the collectBooks method:
    this.collectBooks(booksWithUpdatedBook);
}