React.js项目中componentDidMount未触发，加载图标无法消失求助

你的componentDidMount没有触发的核心原因是：你的App组件根本没有被React挂载到DOM中。你只是定义了App类，然后直接调用了它的run方法，在run里手动调用ReactDOM.render（你代码里的render应该是ReactDOM.render）渲染了一堆元素，但整个过程中React并没有实例化和挂载App组件本身，所以它的生命周期钩子自然不会执行。

我们需要把App变成真正被React渲染的组件，把数据获取、状态管理和渲染逻辑都放到React的生命周期里，同时用组件状态来控制加载图标的显示，而不是直接操作DOM。

以下是修改后的完整代码：

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, Switch, Redirect } from 'react-router-dom';
import Header from './Header'; // 假设你有这个组件
import Footer from './Footer';
import Home from './Home';
import About from './About';
import Contact from './Contact';
import Archive from './Archive';
import DataActions from './DataActions'; // 你的Flux action类

class App extends Component { 
  constructor(props) {
    super(props);
    // 初始化状态：loading为true，pages为空数组
    this.state = {
      loading: true,
      pages: []
    };
    this.handleLoad = this.handleLoad.bind(this); // 绑定this上下文
  }

  templates = { 
    'about': About, 
    'contact': Contact, 
    'archive': Archive 
  } 

  buildRoutes(){ 
    return this.state.pages.map((page, i) => { 
      return( 
        <Route key={i} component={this.templates[page.slug]} path={`/${page.slug}`} exact /> 
      ) 
    }) 
  } 

  componentDidMount() { 
    // 在这里发起异步请求获取页面数据，这是React组件的标准做法
    DataActions.getPages((response) => { 
      // 获取数据后更新组件状态，自动触发重新渲染
      this.setState({
        pages: response.pages,
        loading: false
      }, () => {
        // 状态更新完成后再执行加载图标淡出逻辑
        this.handleLoad();
      });
    });
    console.log("componentDidMount"); 
  } 

  // 淡出加载图标
  handleLoad() { 
    console.log("CALLED"); 
    const fadeTarget = document.getElementById("loaderSmall"); 
    if (!fadeTarget) return; // 防止DOM元素不存在导致报错
    let fadeEffect = setInterval(() => { 
      if (!fadeTarget.style.opacity) { 
        fadeTarget.style.opacity = 1; 
      } 
      if (fadeTarget.style.opacity < 0.1) { 
        clearInterval(fadeEffect);
        fadeTarget.style.display = 'none'; // 淡出后隐藏元素，避免占用布局空间
      } else { 
        fadeTarget.style.opacity -= 0.1; 
      } 
    }, 100); // 缩小间隔让淡出动画更平滑
  } 

  render() {
    return (
      <div>
        {/* 根据loading状态控制加载图标的显示/隐藏 */}
        {this.state.loading && (
          <div className="loaderSmall" id="loaderSmall">
            <div className="pixel-loader"></div>
          </div>
        )}
        <Router>
          <div>
            <Header />
            <Switch>
              <Route path="/" component={Home} exact />
              {this.buildRoutes()}
              <Route render={() => <Redirect to="/" />} />
            </Switch>
            <Footer />
          </div>
        </Router>
      </div>
    );
  }
}

// 现在真正将App组件实例化并挂载到DOM中
render(<App />, document.getElementById('app'));

1. 让App组件被React正常挂载：通过render(<App />, ...)实例化组件，React才会触发它的所有生命周期钩子（包括componentDidMount）。
2. 用组件状态管理数据和加载状态：新增loading和pages状态变量，数据获取完成后更新状态，自动驱动组件重新渲染。
3. 将异步请求移到componentDidMount：这是React组件中发起异步操作的标准位置，确保组件挂载完成后再获取数据。
4. 优化DOM操作逻辑：添加了元素存在性检查避免报错，调整动画间隔提升平滑度，淡出后隐藏元素优化布局。

这样修改后，componentDidMount会正常触发，数据加载完成后加载图标也能正确淡出。

内容的提问来源于stack exchange，提问作者fransBernhard