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

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

单击该按钮时，该组件会显示一个按钮，我在

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;

“严格使用”；
类LoginFormComponent扩展了React.Component{
handleSubmit（）{
console.log（this.model）；//未定义
}
组件willmount（）{
该模型=123；
}
render（）{
console.log（this.model）；//123
var styles=this.props.styles；
返回(
);
}
};
module.exports=LoginFormComponent；

组件willmount中声明的代码将不在实例范围内，原因很简单：组件尚未装入。如果要在类中声明全局属性，只需使用

componentDidMount

或像任何其他方法一样在类主体中声明它。

您应该使用

componentDidMount

来设置实例属性，因为

componentWillMount

中的内容将不在实例范围内，因为组件尚未装入

另外，使用

=>

胖箭头函数可以访问组件的

此

实例

更新代码：

类LoginFormComponent扩展了React.Component{ handleSubmit=（）=>{ console.log（this.model）；//123 } componentDidMount（）{ 该模型=123； } render（）{ console.log（this.model）；//123 var styles=this.props.styles； 返回( ); } } 导出默认LoginFormComponent； 控制台

演示：

更多信息

如本演示所述，React的工作方式如下：

建造师

组件将安装

渲染

组件安装

因此，在执行

render（）

之后，将执行

componentDidMount

，并且在任何状态更改之后都不会发生任何更改

如果您想在那里找到一些东西，请将它们放入

constructor（）

---

此外，

componentWillMount

已被弃用，您不应该在下一个版本中使用它。

因为通过编写

onClick={this.handleSubmit}

可以将函数从上下文中分离出来，而在这个函数中，您有这个-而不是您的组件 试着写

onClick = {this.handleSubmit.bind (this)}

或

---

首先，

model

似乎用作状态字段，如

React

文档中所述：

通常，in-React构造函数仅用于两个目的：

• 通过将对象分配给此.state初始化本地状态
• 将事件处理程序方法绑定到实例

不应在构造函数（）中调用setState（）。相反，如果组件需要使用本地状态，请直接在构造函数中将初始状态分配给this.state：

因此，您应该首先使用以下方法定义您的状态：

constructor(props) {
    this.state.model = 123; // or
    this.state = {          // commonly used syntax
        model : 123
    }
}

然后仍然根据文档：

不安全的_componentWillMount（）在装载发生之前被调用。它在render（）之前调用，因此在此方法中同步调用setState（）不会触发额外的渲染。通常，我们建议使用构造函数（）来初始化状态

您确实在使用它来初始化组件的状态。正如其他人所指出的，您应该改为使用

ComponentDidMount

并使用

this.setState

修改状态，因为直接使用

this.state.model修改状态被视为不良行为

构造函数是您应该直接分配this.state的唯一位置。在所有其他方法中，都需要使用此.setState（）

请检查：有关更多信息
我认为
这个。modal
指的是FlatButton组件，您能将
handleSubmit
绑定到LoginFormComponent吗


    class LoginFormComponent extends React.Component {
      constructor(props) {
        super(props);

        // This binding is necessary to make `this` work in the callback
        this.handleSubmit = this.handleSubmit.bind(this);
      }
      handleSubmit() {
      ...



我在答案中增加了更多细节。谢谢

    class LoginFormComponent extends React.Component {
      constructor(props) {
        super(props);

        // This binding is necessary to make `this` work in the callback
        this.handleSubmit = this.handleSubmit.bind(this);
      }
      handleSubmit() {
      ...