javascript - 为什么ComponentWillMount中声明的变量是Undefined？

Question

我有一个这种类型的组件。为简单起见，我删除了所有不必要的代码。

这个组件在点击时显示一个按钮，我在ComponentWillMount声明的变量的值应该显示在控制台中，但是点击时，控制台显示undefined，为什么？

    'use strict';
    class LoginFormComponent extends React.Component {

      handleSubmit() {
        console.log(this.model); //undefined
      }

      componentWillMount() {
        this.model = 123;
      }

      render() {
                    console.log(this.model);  //123
        var styles = this.props.styles;

        return (
                <CM.MUI.FlatButton
                style={styles.buttonStyle}
                onClick={this.handleSubmit}
                label={CM.gettext('Login')}/>
        );
      }
    };

    module.exports = LoginFormComponent;

Answer 1

您应该使用 componentDidMount 来设置实例属性，因为 componentWillMount 中的内容不会在实例范围内，因为组件尚未安装。

此外，使用 => 粗箭头函数来访问组件的 this 实例。

更新代码:

class LoginFormComponent extends React.Component {
  handleSubmit = () => {
    console.log(this.model); // 123
  }

  componentDidMount() {
    this.model = 123;
  }

  render() {
    console.log(this.model); //123
    var styles = this.props.styles;

    return (
      <CM.MUI.FlatButton
        style={styles.buttonStyle}
        onClick={this.handleSubmit}
        label={CM.gettext("Login")}
      />
    );
  }
}

export default LoginFormComponent;

控制台

演示:agitated-solomon-3rrow - CodeSandbox

更多信息

如本演示中所述:summer-violet-g4pyd - CodeSandbox ，看起来 React 的工作方式如下:

1. 构造器
2. componentWillMount
3. 渲染
4. componentDidMount

因此在执行 render() 之后，将执行 componentDidMount 并且在任何状态更改后都没有变化。

如果你想要一些东西在那里，请把它们放在 constructor() 中。

此外，componentWillMount 已弃用，您不应在下一个版本中使用它。