javascript - 为什么 ComponentWillMount 中声明的变量未定义？

Question

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

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

    '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;

标签： javascriptreactjs

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. 组件WillMount
3. 使成为
4. 组件DidMount

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

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

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