Console.Log не вызывается внутри React Constructor

Question

Я пытаюсь добавить компонент в .NET Core MVC по умолчанию с проектом React.Я считаю, что у меня есть все, что связано с зеркальным отображением существующего компонента «Извлечение данных», но не похоже, что он действительно вызывается (но ссылка на компонент в моей панели навигации действительно перемещается на новую страницу).

Сам компонент ...

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>
    );
  }
}

Этот console.log ("Кто сейчас") никогда не вызывается, когда я проверяю, и страницаостается полностью пустымЯ не могу найти ключевое различие между этим и функционирующими компонентами, и Google тоже не сильно помог.Есть идеи, чего не хватает?

Редактировать

Во время устранения этой проблемы я создал кошмар зависимостей, который сломал приложение.Поскольку я использую приложение только для изучения React, я обстрелял его и начал заново - и со второй попытки мне не удалось воспроизвести проблему отсутствия рендеринга.

Answer 1

Рекомендуется использовать componentDidMount, чтобы сделать вызов REST API с помощью fetch или 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>
    );
  }
}