在React構造函數中未調用Console.Log

Question

我正在嘗試將組件添加到帶有React項目的默認.NET Core MVC中。 我相信我已經將所有東西都連接起來以鏡像現有的“獲取數據”組件，但是似乎並沒有真正調用它（但是導航欄中指向該組件的鏈接確實移到了新頁面）。

組件本身...

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

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（“ Who now”），並且該頁面完全空白。 我找不到這和功能組件之間的關鍵區別，谷歌也沒有太大的幫助。 任何想法缺少什么？

編輯

在對此進行故障排除時，我最終造成了導致應用程序崩潰的依賴噩夢。 由於我僅使用該應用程序來瀏覽React，因此我將其刪除並重新開始-在第二次嘗試中，我無法重現未渲染的問題。

Answer 1

建議使用componentDidMount通過fetch或axios調用REST API。

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