Console.Log Not Being Called Inside React Constructor

Question

I'm trying to add a component to a default .NET Core MVC with React project. I believe I have everything wired up to mirror the existing "Fetch Data" component, but it doesn't seem like it's actually being called (but the link to the component in my navbar does move to a new page).

The component itself...

import React, { Component } from 'react';

export class TestComponent extends Component {
    static displayName = TestComponent.name;

    constructor (props) {
        super(props);
        console.log("WHO NOW?");
        this.state = { message: '', loading: true, promise: null };

        this.state.promise = fetch('api/SampleData/ManyHotDogs');

        console.log(this.state.promise);
    }

    static renderForecastsTable (message) {
        return (
            <h1>
                Current Message: {message}
            </h1>
        );
    }

    render () {
        let contents = this.state.loading

            ? <p><em>Loading...</em></p>
            : TestComponent.renderForecastsTable(this.state.message);

        return (

            <div>
                <h1>Weather forecast</h1>
                <p>This component demonstrates fetching data from the server.</p>
                {contents}
            </div>
        );
    }
}

The App.js

import React, { Component } from 'react';
import { Route } from 'react-router';
import { Layout } from './components/Layout';
import { Home } from './components/Home';
import { FetchData } from './components/FetchData';
import { Counter } from './components/Counter';
import { TestComponent } from './components/TestComponent';

export default class App extends Component {
  static displayName = App.name;

  render () {
    return (
      <Layout>
        <Route exact path='/' component={Home} />
        <Route path='/counter' component={Counter} />
        <Route path='/fetch-data' component={FetchData} />
        <Route path='/test-controller' component={TestComponent} />
      </Layout>
    );
  }
}

That console.log("Who now") is never called when I inspect, and the page remains totally blank. I can't find a key difference between this and the functioning components, and google has not been much help either. Any ideas what is missing?

Edit

While troubleshooting this, I ended up creating a dependency nightmare that broke the app. Since I'm only using the app to explore React, I nuked it and started over--and on the second attempt I have not been able to reproduce the not-rendering issue.

Answer 1

It is advisable to use componentDidMount to make the call to the REST API with the fetch or axios.

class TestComponent extends Component{
  constructor(props){
    state = {promise: ''}
  }
  async componentDidMount () {
    let promise = await fetch ('api / SampleData / ManyHotDogs');
    this.setState ({promise});
    console.log (promise);
  }
  render(){
    return(
        <div>{this.state.promise}</div>
    );
  }
}