javascript - Console.Log 没有在 React 构造函数中被调用

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