Failed to compile ./src/App.js This error occurred during the build time and cannot be dismissed.
|
Lösung:
In der React Datei die aufgerufen werden soll ist der Name der Komponente nicht vorhanden
Den Name nach Export class korrigieren
export class Articles extends Component { static displayName = Articles.name;
constructor(props) { super(props); this.state = { articles: [], loading: true }; }
|
App.js
import React, { Component } from 'react'; import { Route } from 'react-router'; import { Layout } from './components/Layout'; import { Articles } from './components/Articles'; import { Home } from './components/Home'; import { FetchData } from './components/FetchData'; import { Counter } from './components/Counter'; import AuthorizeRoute from './components/api-authorization/AuthorizeRoute'; import ApiAuthorizationRoutes from './components/api-authorization/ApiAuthorizationRoutes'; import { ApplicationPaths } from './components/api-authorization/ApiAuthorizationConstants';
import './custom.css'
export default class App extends Component { static displayName = App.name;
render() { return ( <Layout> <Route exact path='/' component={Articles} /> <Route exact path='/home' component={Home} /> <Route path='/counter' component={Counter} /> <AuthorizeRoute path='/fetch-data' component={FetchData} /> <Route path={ApplicationPaths.ApiAuthorizationPrefix} component={ApiAuthorizationRoutes} /> </Layout> ); } } |
Component.js
import React, { Component } from 'react';
export class Articles extends Component { static displayName = Articles.name;
constructor(props) { super(props); this.state = { articles: [], loading: true }; }
componentDidMount() { this.populateWeatherData(); }
static renderTable(articles) { return ( <table className='table table-striped' aria-labelledby="tabelLabel"> <thead> <tr> <th>title</th>
</tr> </thead> <tbody> {articles.map(article => <tr key={article.IDArticle}> <td>{article.title}</td> </tr> )} </tbody> </table> ); }
render() { let contents = this.state.loading ? <p><em>Loading...</em></p> : Articles.renderTable(this.state.articles);
return ( <div> <h1 id="tableLabel" >Articles</h1> <p>This component demonstrates fetching data from the server.</p> {contents} </div> ); }
async populateWeatherData() { const response = await fetch('weatherforecast'); const data = await response.json(); this.setState({ articles: data, loading: false }); } }
|