React Component получает реквизиты, но не рендерит их, почему?

Question

У меня есть страница с отображением книг пользователя. На этой странице MyBooks установите компонент React mount. Когда он смонтирован, он получает книги пользователя через API. Затем он обновляет состояние компонента с помощью книг пользователя.

1. компонент крепления
2. получать книги через API
3. когда у нас есть результаты, обновить состояние компонента
4. сделать заново компонент BooksList (но этого не происходит)

---

Вот мой код для MyBooks компонента:

class MyBooks extends Component {
  // TODO: fetch user info
  constructor(props) {
    super(props);

    this.state = {
      books: [],
      errors: []
    };

    this.fetchBooks = this.fetchBooks.bind(this);
  }

  componentDidMount() {
    console.log('component mounted!');
    this.fetchBooks();
  }

  fetchBooks() {
    let _this = this;
    BooksLibraryApi.getBooks().then(foundBooks => {
      console.log('books found:', foundBooks);
      _this.setState({
        books: foundBooks
      });
    });
  }

  render() {
    console.log('MyBooks state:', this.state);
    return (
      <Section>
        <Container>
          <h1>My books</h1>
          <BooksList books={this.state.books} />
        </Container>
      </Section>
    );
  }
}

export default withRouter(MyBooks);

Вот результат для console.log('books found:', foundBooks):

---

Вот мой код для BooksList компонента:

class BooksList extends React.Component {
  render() {
    console.log('BooksList props:', this.props);
    return (
      <Columns breakpoint="mobile">
        {this.props.books.map((book, i) => {
          console.log(book);
          return (
            <Columns.Column
              key={i}
              mobile={{ size: 'half' }}
              desktop={{ size: 2 }}
            >
              <BookCard book={book} />
            </Columns.Column>
          );
        })}
      </Columns>
    );
  }
}

export default BooksList;

Вот код для BookCard компонента:

class BookCard extends React.Component {
  constructor(props) {
    super(props);
    console.log('props', props);
    this.readBook = this.readBook.bind(this);
    this.addBook = this.addBook.bind(this);
    this.deleteBook = this.deleteBook.bind(this);
    this.wantBook = this.wantBook.bind(this);
  }

  readBook() {
    BooksLibraryApi.readBook(this.props.book.id);
  }

  addBook() {
    BooksLibraryApi.addBook(this.props.book.id);
  }

  wantBook() {
    BooksLibraryApi.wantBook(this.props.book.id);
  }

  deleteBook(e) {
    BooksLibraryApi.deleteBook(this.props.book.id, e);
  }

  render() {
    return (
      <div className="card-book">
        <Link to={`/book/${this.props.book.id}`}>
          {this.props.book.doHaveThumbnail ? (
            <Image
              alt="Cover"
              src={this.props.book.thumbnailUrl}
              size={'2by3'}
            />
          ) : (
            <div className="placeholder">
              <span>{this.props.book.title}</span>
            </div>
          )}
        </Link>
        <Button fullwidth color="primary" size="small" onClick={this.wantBook}>
          Add to wishlist
        </Button>
      </div>
    );
  }
}

export default withRouter(BookCard);

Компонент console.log in BooksList не вызывается. Это означает, что компонент отображается только один раз, когда массив this.props.books пуст.

Я не понимаю, почему BooksList не отображается снова, когда его реквизиты обновляются (когда компонент MyBooks обновляет свое состояние).

Странное поведение: я использую React Router, и когда я впервые нажимаю на ссылку "Мои книги" (которая идет к моему MyBooks компоненту), она не работает, но когда я снова нажимаю на нее, все отлично работает Что означает, что что-то не так с рендерингом / образом жизни компонента.

Спасибо.