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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/31709258/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-28 14:14:06  来源:igfitidea点击:

Why is getInitialState not being called for my React class?

javascriptreactjs

提问by ndbroadbent

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 getInitialStateis being called, because I'm getting this error: Cannot read property 'bar' of null.

它看起来并不像getInitialState被调用,因为我得到这个错误:Cannot read property 'bar' of null

回答by ndbroadbent

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 类支持。如果您使用扩展的 ES6 类React.Component,那么您应该使用 aconstructor()而不是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 实际上只是构造函数上的属性。

回答by Des Horsley

Code to accompany Nathans answer:

伴随内森回答的代码:

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>
    );
  }
}

回答by CpILL

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" }
    ...
}

or

或者

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 anywhereonline with regards to ES6 classes :?

或者任何你声明为静态类变量的东西。我不知道为什么网上的任何地方都没有谈论ES6 类:?

see the docs.

请参阅文档