javascript - React : _this. 状态未定义

Question

我写了以下代码片段:

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}
    ]}
  }

  stadt = this.props.location.stadt;

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

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

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


export default Kurse;

预期结果:

我希望日期会出现在网站(应用程序页面)上。

实际结果:

我得到“_this.state未定义”，并突出显示“构造函数(props)”。

一旦我从构造函数中取出带有日期的代码片段，一切就都正常了!？

有什么帮助吗？或者提示？

Answer 1

类字段初始值设定项(例如用于创建 listItemsFreiburg 的类字段初始值设定项)在构造函数中的代码之前执行(它们实际上被插入到构造函数中调用 super 之后的开始)。例如，这个:

class Example {
    constructor(...args) {
        super(...args);
        this.answer = 42;
    }

    question = "Life, the Universe, and Everything";
}

实际上是这样的:

class Example {
    constructor(...args) {
        super(...args);
        this.question = "Life, the Universe, and Everything";
        this.answer = 42;
    }
}

注意顺序。详情见the class fields proposal .

这就是为什么当您调用 map 来创建 listItemsFreiburg 和其他时，state 是 未定义一个。

使用字段初始值设定项来创建状态，或将类字段初始值设定项移至构造函数中。

但是，考虑到它们是基于状态的，在构建时构建它们似乎很奇怪。我会将它们作为本地变量移至 render 中，或者至少在状态更改时更新它们。