Unable to get React page for rendering.

Question

I use Material-UI to create my application. Here is the link to my code on Github: https://github.com/tutfakulunto/material-ui-site/blob/master/src/modules/languages/index.js and here is the code below:

'use strict';

import React from 'react';
import PropTypes from 'prop-types';
import AppLayout from '../../components/appLayout';
import LanguageIcon from 'material-ui-icons/Language';
import shortid from 'shortid';
import Table, { TableBody, TableCell, TableHead, TableRow } from 
    'material-ui/Table';
import Paper from 'material-ui/Paper';
import {withStyles, withTheme} from 'material-ui/styles';
import api from '../../helpers/api';

class LanguagesPage extends React.Component {

    state = {languages: {}};

    componentDidMount() {
        this.fetchLanguages()
            .then(languages => this.setState({languages}))
            .catch(error => {
                this.setState({languages: {}});
            });
    }

    render() {
        const {languages} = this.state;

        if (!languages.data) {
            return null;
        }

        return (
            <AppLayout title={[<LanguageIcon className="page-icon" key= 
            {shortid.generate()} />, 'Languages']}>
                <Paper>
                  <Table>
                    <TableHead>
                      <TableRow>
                        <TableCell>Name</TableCell>
                        <TableCell numeric>Abbreviation</TableCell>
                        <TableCell numeric>Family</TableCell>
                        <TableCell numeric>Description</TableCell>
                        <TableCell numeric>Created At</TableCell>
                        <TableCell numeric>Updated At</TableCell>
                      </TableRow>
                   </TableHead>
                   <TableBody>
                      {languages.data.map(language => {
                        return (
                          <TableRow key={language.id}>
                            <TableCell>{language.name}</TableCell>
                            <TableCell numeric>{language.abbreviation} 
                            </TableCell>
                            <TableCell numeric>{language.family} 
                            </TableCell>
                            <TableCell numeric>{language.description} 
                            </TableCell>
                            <TableCell numeric>{language.createdAt} 
                             </TableCell>
                            <TableCell numeric>{language.updatedAt} 
                            </TableCell>
                          </TableRow>
                        );
                      })}
                    </TableBody>
                  </Table>
                </Paper>
            </AppLayout>
        );
    }

        fetchLanguages = () => {
            return api.get('http://localhost:3000/languages');
        }
    }

    export default LanguagesPage;

I commented on this, line by line, and every time I check the Chrome console. The console tells me about the error:

Warning. It can only update a mounted or mounting component. This usually means that you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op. Check the code for LanguagesPage Component.

, , - , . "" 204 No Content. render() Hello World h1, . , render() - . .

. , , , , . .