无法让 React 页面呈现

Question

我正在使用 Material-UI 来构建我的应用程序。这是我在 Github 上的代码的链接：https://github.com/tutfakulunto/material-ui-site/blob/master/src/modules/languages/index.js，下面是代码：

'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;

我已经逐行注释掉了，并且每次都检查 Chrome 控制台。控制台给了我一个错误说：

警告：只能更新已安装或已安装的组件。这通常 表示您在一个 未安装的组件。这是一个无操作。请检查代码 LanguagesPage 组件。

当然，我确实检查了代码，但似乎仍然无法找到它不起作用的原因。在网络选项卡下，它显示204 No Content。如果我注释掉render() 下的所有内容并将Hello World 放在h1 标签中，那么它确实会显示该页面。这使我得出结论，render() 下的代码有问题。但随后控制台错误告诉我不同​​。

我将不胜感激任何关于此的建议。我对堆栈溢出也比较陌生，所以请告诉我是否应该在网站的其他地方发布此内容。

Answer 1

您的组件可能在获取完成之前已安装然后卸载。

要解决这个问题，请查看answer about the same warning