反应：_this.state未定义

Question

I wrote the following snippet:

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;

Expected result:

I expect that the dates will appear on the website (the app page).

Actual result:

I get "_this.state is not defined" with "constructor(props)" being highlighted.

As soon as I take the snippet with the dates out of the constructor all works fine!?

Any help? Or hints?

Answer 1

Class field initializers like the one you're using to create listItemsFreiburg and such are executed before the code in the constructor (they're effectively inserted into the constructor at the beginning after the call to super ). Eg, this:

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

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

is effectively this:

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

Notice the order. Details in the class fields proposal .

That's why state is undefined as of when you're calling map to create listItemsFreiburg and the other one.

Either use a field initializer to create your state, or move your class field initializers into the constructor.

However , it seems odd to build those at construction time, given that they're based on state. I'd move them into render as locals, or at least update them when state changes.

Answer 2

listItemsFreiburg

listItemsKarlsruhe

stadt = this.props.location.stadt;

These need to be in the render() { return() } above the return statement.

like this with const before them.

render() {
 const 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>);
 const { stadt } = this.props.location;
 return (...) 
}

Answer 3

You should bind listItemsFreiburg & listItemsKarlsruhe to this in the constructor like this:

constructor(props) {
   super(props);

   this.state = {
      // Your data
   }

   this.listItemsFreiburg = this.listItemsFreiburg.bind(this);
   this.listItemsKarlsruhe = this.listItemsKarlsruhe.bind(this);

}

Answer 4

You don't need contructor(props) and super(props) just if you need to use this props in constructor.

You can't render just an object if the conditions is true.

import React, { Component } from "react";
import { render } from "react-dom";

class App extends Component {
  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 }
    ]
  };

  renderFreiburg = () => {
    return this.state.termineFreiburg.map(item => {
      return (
        <p>
          <span>{item.date} | </span>
          <span>{item.free}</span>
        </p>
      );
    });
  };
  render() {
    return <div>{true ? this.renderFreiburg() : null}</div>;
  }
}

render(<App />, document.getElementById("root"));

here is my example: https://codesandbox.io/s/q8kxr898l9