Компонент React для обновления дочернего компонента

У меня есть компонент Реагировать (Albums), метод render() которого возвращает один из двух возможных компонентов, в зависимости от его состояния. Один из этих компонентов (AlbumsTable) вызывается с двумя параметрами props, classes и albums. Второй параметр props — это массив, полученный ajax с использованием Аксиос в методе (getData), который обновляет состояние Albums, вызывая его повторный рендеринг.

Из-за асинхронного характера Ajax Albums выполняет рендеринг дважды, первый раз с this.albums = [], а второй (вызванный обновлением состояния getData()) с this.albums, равным результату ajax.

Проблема в том, что я могу проследить, что AlbumsTable.constructor() вызывается только один раз (при первом рендеринге Albums), когда this.albums равен []. Таким образом, во второй раз, когда Albums выполняет рендеринг, когда this.albums равен результату ajax, этот контент не отправляется в качестве реквизита в AlbumsTable, в результате чего результат ajax никогда не отображается.

Это код моих компонентов:

import React, { Component } from 'react';
import Cookies from 'js-cookie';
import axios from 'axios';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import Paper from '@material-ui/core/Paper';

const styles = theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
  },
  table: {
    minWidth: 700,
  },
});

class AlbumsTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      classes: props.classes,
    }

    if (props.albums === undefined){
      this.albums = [];
    } else {
      this.albums = props.albums;
    }

  }

  render() {
    return (
      <Paper className = {this.state.classes.root}>
        <Table className = {this.state.classes.table}>
          <TableHead>
            <TableRow>
              <TableCell>ID</TableCell>
              <TableCell align = "right">Name</TableCell>
              <TableCell align = "right">Photos</TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {this.albums.map(album => {
              return (
                <TableRow key = {album.id}>
                  <TableCell component = "th" scope = "row">
                    {album.name}
                  </TableCell>
                  <TableCell align = "right">{"photos"}</TableCell>
                </TableRow>
              );
            })}
          </TableBody>
        </Table>
      </Paper>
    );
  }
}

class AlbumDetail extends Component {
  render() {
    return(<p>Album Detail Comming Soon...</p>);
  }
}

class Albums extends Component {
  constructor(props) {
    super(props);

    this.state = {
      classes: props.classes,
      mode: 'table',
      albums: [],
    };
    this.albums = [];
    this.getData();
  }

  getData() {
      const axios = require('axios');
      var userToken = Cookies.get('token');
      axios.defaults.xsrfHeaderName = "X-CSRFTOKEN";
      axios.defaults.xsrfCookieName = "csrftoken";
      axios.get('http://127.0.0.1:8000/es/api/albums/',
        {
          headers: {
            Authorization: userToken,
          }
        }
      )
      .then(function (response) {
        console.info(response);
        this.albums = response.data.results;
        this.setState({albums: this.state.albums + 1});
      }.bind(this))
      .catch(function (error) {
        console.info(error);
        return(null);
      })
    }

  setData(albums) {
    this.setState({albums: albums});
  }

  render() {  
    if (this.state.mode === 'table'){
      return (<AlbumsTable classes = {this.state.classes} albums = {this.albums} />);
    } else {
      return (<AlbumDetail />);
    }

  }
}

Albums.propTypes = {
  classes: PropTypes.object.isRequired,
};

export default withStyles(styles)(Albums);

Думаю, я что-то упускаю или неправильно понимаю в рендеринге компонентов.