React生命周期方法componentWillLoad未触发问题求助

嘿，我一眼就看出问题所在啦！你在CityChoice组件里用了componentWillLoad()，但这个方法并不是React类组件的生命周期钩子函数，这就是它完全没触发的原因～

为什么会出现这个问题？ #

React类组件里根本没有componentWillLoad这个生命周期方法，你大概率是把其他前端框架（比如Stencil）的生命周期逻辑记混了。React类组件在初始化阶段的核心钩子是这些：

• constructor()：组件实例创建时第一个执行，适合初始化state、绑定事件处理器
• componentDidMount()：组件挂载到DOM后执行，是发起异步请求（比如你代码里要加载的courses数据）的最佳时机
• 旧版的componentWillMount()已经被官方标记为废弃，不推荐再使用

修复后的代码 #

把componentWillLoad()替换成React支持的生命周期钩子就行，这里推荐用componentDidMount（最匹配你的需求场景）：

import React from 'react';
import styled from 'styled-components';
import { Link } from 'react-router-dom';
import Request from 'superagent';
import _ from 'lodash';

export class CityChoice extends React.Component{
  constructor(props) {
    super(props);
    this.state={}
  }

  // 替换为React官方支持的componentDidMount钩子
  componentDidMount(){
    console.log('Marc');
    // 如果要加载courses数据，异步请求也建议放在这里
    // Request.get('/你的接口地址')
    //   .then(res => this.setState({courses: res.body}))
    //   .catch(err => console.error(err))
  }

  render(){
    const courses = _.map(this.state.courses, (course) => {
      return <li>{course.venue}</li>
    })
    return (
      <div>
        <h2>Wähle Deine Stadt</h2>
        <p><Link to={{pathname: "/kurse", stadt: 'Freiburg'}}><button>Freiburg</button></Link></p>
        <p><Link to={{pathname: "/kurse", stadt: 'Karlsruhe'}}><button>Karlsruhe</button></Link></p>
        <ul>{courses}</ul>
      </div>
    );
  }
}

补充小提示 #

如果你只是想执行一些同步初始化代码，也可以直接把逻辑写在constructor里：

constructor(props) {
  super(props);
  this.state={};
  console.log('Marc'); // 这里同样会触发输出
}

但如果涉及异步操作（比如接口请求），一定要放在componentDidMount里，因为此时组件已经完成DOM挂载，不会出现渲染相关的异常。

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