I'm using Material-UI to build my app. Here is a 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've commented things out, line by line, and check the Chrome console each time. The console gives me an error saying this:
Warning: Can only update a mounted or mounting component. This usually means you called setState, replaceState, or forceUpdate on an unmounted component. This is a no-op. Please check the code for the LanguagesPage component.
Naturally, I did check the code, but still can't seem to find why it's not working. Under the network tab, it shows 204 No Content. If I comment out everything under render() and just put Hello World in h1 tags, then it does display the page. This leads me to conclude there's something wrong with my code under render(). But then the console error tells me different.
I'd appreciate any advice on this. I'm also relatively new to stack overflow, so please let me know if I should have posted this elsewhere on the site.
