为什么没有为我的React类调用getInitialState？

I'm using ES6 classes with Babel. I have a React component that looks like this:

我正在使用Babel的ES6课程。我有一个看起来像这样的React组件:

import { Component } from 'react';

export default class MyReactComponent extends Component {
  getInitialState() {
    return {
      foo: true,
      bar: 'no'
    };
  }

  render() {
    return (
      <div className="theFoo">
        <span>{this.state.bar}</span>
      </div>
    );
  }
}

It doesn't look like getInitialState is being called, because I'm getting this error: Cannot read property 'bar' of null.

看起来好像没有调用getInitialState,因为我收到了这个错误:无法读取null的属性'bar'。

3 个解决方案

#1

The developers talk about ES6 class support in the Release Notes for v0.13.0. If you use an ES6 class that extends React.Component, then you should use a constructor() instead of getInitialState:

开发人员在v0.13.0的发行说明中讨论了ES6类支持。如果您使用扩展React.Component的ES6类,那么您应该使用构造函数()而不是getInitialState:

The API is mostly what you would expect, with the exception of getInitialState. We figured that the idiomatic way to specify class state is to just use a simple instance property. Likewise getDefaultProps and propTypes are really just properties on the constructor.

除了getInitialState之外,API主要是您所期望的。我们认为指定类状态的惯用方法是使用简单的实例属性。同样,getDefaultProps和propTypes实际上只是构造函数的属性。

#2

Code to accompany Nathans answer:

代码与Nathans一起回答:

import { Component } from 'react';

export default class MyReactComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      foo: true,
      bar: 'no'
    };
  }

  render() {
    return (
      <div className="theFoo">
        <span>{this.state.bar}</span>
      </div>
    );
  }
}

#3

To expand a bit on what it means

详细说明它意味着什么

getDefaultProps and propTypes are really just properties on the constructor.

getDefaultProps和propTypes实际上只是构造函数的属性。

the "on the constructor" bit is weird wording. In normal OOP language it just means they are "static class variables"

“在构造函数上”位是奇怪的措辞。在普通的OOP语言中,它只是意味着它们是“静态类变量”

class MyClass extends React.Component {
    static defaultProps = { yada: "yada" }
    ...
}

MyClass.defaultProps = { yada: "yada" }

you can also refer to them within the class like:

你也可以在课堂上引用它们,如:

constructor(props) {
    this.state = MyClass.defaultProps;
}

or with anything you declare as a static class variable. I don't know why this is not talked about anywhere online with regards to ES6 classes :?

或者你声明为静态类变量的任何东西。我不知道为什么在ES6课程的任何地方都没有谈到这个问题:?

see the docs.

看文档。

#1