React类组件报错_this.state is undefined，求解决方案

看起来你遇到了一个典型的React类组件初始化顺序问题，我来帮你分析并解决它：

问题根源 #

你在类组件中直接定义了stadt、listItemsFreiburg、listItemsKarlsruhe这些类属性，它们的初始化时机是在构造函数执行之前的。这时候this.state还没有被构造函数初始化完成，所以当你尝试访问this.state.termineFreiburg或者this.state.termineKarlsruhe时，自然会抛出_this.state is not defined的错误。

解决方法 #

这里提供两种常用的修复方案，你可以根据自己的习惯选择：

方案1：将列表渲染逻辑移到render方法内部 #

把生成列表项的代码放到render方法里，这样就能确保this.state已经完成初始化：

export class Kurse extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      termineFreiburg: [
        {date: "21.02.2019", free: 10},
        {date: "02.05.2018", free: 0},
        {date: "13.03.2018", free: 10},
        {date: "04.07.2018", free: 12},
        {date: "05.08.2018", free: 12}
      ],
      termineKarlsruhe:[
        {date: "09.03.2019", free: 2},
        {date: "12.01.2018", free: 5}
      ]
    };
  }

  render() {
    const stadt = this.props.location.stadt;
    // 在render内生成列表项，此时this.state已初始化
    const listItemsFreiburg = this.state.termineFreiburg.map((termin) => (
      <p key={termin.date}>
        <Link to={{pathname: "/bookCourse", datum: termin.date, stadt}}>
          <Button>
            {termin.date} Freie Plätze: {(termin.free > 0) ? termin.free : 'ausgebucht'}
          </Button>
        </Link>
      </p>
    ));
    const listItemsKarlsruhe = this.state.termineKarlsruhe.map((termin) => (
      <p key={termin.date}>
        <Link to={{pathname: "/bookCourse", datum: termin.date, stadt}}>
          <Button>{termin.date} Freie Plätze: {termin.free}</Button>
        </Link>
      </p>
    ));

    return(
      <div>
        <h2>Wähle Deinen Wunschtermin für einen Kurs in {stadt}</h2>
        {stadt === 'Freiburg' ? listItemsFreiburg : listItemsKarlsruhe}
      </div>
    );
  }
}
export default Kurse;

方案2：使用类的getter方法 #

把列表项的生成逻辑改成类的getter，这样它们会在被访问时才计算，此时this.state已经初始化完成：

export class Kurse extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      termineFreiburg: [
        {date: "21.02.2019", free: 10},
        {date: "02.05.2018", free: 0},
        {date: "13.03.2018", free: 10},
        {date: "04.07.2018", free: 12},
        {date: "05.08.2018", free: 12}
      ],
      termineKarlsruhe:[
        {date: "09.03.2019", free: 2},
        {date: "12.01.2018", free: 5}
      ]
    };
  }

  // 用getter延迟计算属性值
  get stadt() {
    return this.props.location.stadt;
  }

  get listItemsFreiburg() {
    return this.state.termineFreiburg.map((termin) => (
      <p key={termin.date}>
        <Link to={{pathname: "/bookCourse", datum: termin.date, stadt: this.stadt}}>
          <Button>
            {termin.date} Freie Plätze: {(termin.free > 0) ? termin.free : 'ausgebucht'}
          </Button>
        </Link>
      </p>
    ));
  }

  get listItemsKarlsruhe() {
    return this.state.termineKarlsruhe.map((termin) => (
      <p key={termin.date}>
        <Link to={{pathname: "/bookCourse", datum: termin.date, stadt: this.stadt}}>
          <Button>{termin.date} Freie Plätze: {termin.free}</Button>
        </Link>
      </p>
    ));
  }

  render() {
    return(
      <div>
        <h2>Wähle Deinen Wunschtermin für einen Kurs in {this.stadt}</h2>
        {this.stadt === 'Freiburg' ? this.listItemsFreiburg : this.listItemsKarlsruhe}
      </div>
    );
  }
}
export default Kurse;

小提示：我给每个map生成的<p>标签加上了key属性，这是React列表渲染的最佳实践，可以避免不必要的控制台警告。

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