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控制台。控制台给我一个错误说：

警告：只能更新已安装或安装的组件。这通常表示你在一个上调用了setState，replaceState或forceUpdate 未安装的组件。这是一个无操作。请检查代码 LanguagesPage组件。

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

我对此有任何建议。我对堆栈溢出也比较新，所以如果我应该在网站的其他地方发布这个，请告诉我。

Answer 1

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

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

无法获取React页面进行渲染

1 个答案: