Javascript ReactJS this.state为空

在我的组件中，

此状态的值始终为空。代码如下：

class Sidebar extends Component {
  static propTypes = {
    static: PropTypes.bool
  };

  constructor(props) {
    super(props);

    this.state = {
      static: false
    };
  }

  componentWillReceiveProps() {
    console.log(this.state);
  }

  onMouseEnter() {
    console.log(this.state);
  }

  onMouseLeave() {
    console.log(this.state);
  }

  render() {
    return (
      <nav className={s.root} onMouseEnter={this.onMouseEnter.bind(this)} onMouseLeave={this.onMouseLeave.bind(this)}>

      </nav>
    );
  }
}

类边栏扩展组件{
静态类型={
静态：PropTypes.bool
};
建造师（道具）{
超级（道具）；
此.state={
静态：错误
};
}
组件将接收道具（）{
console.log（this.state）；
}
onMouseEnter（）{
console.log（this.state）；
}
请假{
console.log（this.state）；
}
render（）{
返回(
);
}
}

在控制台中，我只看到鼠标进入、鼠标离开和接收新道具时的
null

你知道为什么会这样吗

谢谢
 如果要设置初始状态，则需要实现
getInitialState（）
，而不是在构造函数中尝试
this.state={…}

另外，设置状态属性的正确方法是使用
setState（{static:false}）
，而不是
this.state.static=false
如果要设置初始状态，则需要在构造函数中实现
getInitialState（）
，而不是尝试
this.state={…}

另外，设置状态属性的正确方法是使用
setState（{static:false}）
，而不是
this.state.static=false
我刚刚解决了这个问题，发现问题是需要将方法绑定到对象。我在构造器中这样做，它解决了我的问题

class Sidebar extends Component {
    static propTypes = {
        static: PropTypes.bool
    };

    constructor(props) {
        super(props);

        this.state = {
            static: false
        };

        this.onMouseEnter = this.onMouseEnter.bind(this);
        this.onMouseLeave = this.onMouseLeave.bind(this);
    }

    componentWillReceiveProps() {
        console.log(this.state);
    }

    onMouseEnter() {
        console.log(this.state);
    }

    onMouseLeave() {
        console.log(this.state);
    }

    render() {
        return (
            <nav className={s.root} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}></nav>
        );
    }
}

类边栏扩展组件{
静态类型={
静态：PropTypes.bool
};
建造师（道具）{
超级（道具）；
此.state={
静态：错误
};
this.onMouseEnter=this.onMouseEnter.bind（this）；
this.onMouseLeave=this.onMouseLeave.bind（this）；
}
组件将接收道具（）{
console.log（this.state）；
}
onMouseEnter（）{
console.log（this.state）；
}
请假{
console.log（this.state）；
}
render（）{
返回(
);
}
}
我刚刚解决了这个问题，发现问题在于需要将方法绑定到对象。我在构造器中这样做，它解决了我的问题

class Sidebar extends Component {
    static propTypes = {
        static: PropTypes.bool
    };

    constructor(props) {
        super(props);

        this.state = {
            static: false
        };

        this.onMouseEnter = this.onMouseEnter.bind(this);
        this.onMouseLeave = this.onMouseLeave.bind(this);
    }

    componentWillReceiveProps() {
        console.log(this.state);
    }

    onMouseEnter() {
        console.log(this.state);
    }

    onMouseLeave() {
        console.log(this.state);
    }

    render() {
        return (
            <nav className={s.root} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}></nav>
        );
    }
}

类边栏扩展组件{
静态类型={
静态：PropTypes.bool
};
建造师（道具）{
超级（道具）；
此.state={
静态：错误
};
this.onMouseEnter=this.onMouseEnter.bind（this）；
this.onMouseLeave=this.onMouseLeave.bind（this）；
}
组件将接收道具（）{
console.log（this.state）；
}
onMouseEnter（）{
console.log（this.state）；
}
请假{
console.log（this.state）；
}
render（）{
返回(
);
}
}
适合我。您确定这是此问题涉及的唯一代码吗？请尝试删除静态PropType。。。从您的代码中无法复制：。几乎可以肯定，您的代码在其他地方发生了另一个错误。适用于我。您确定这是此问题涉及的唯一代码吗？请尝试删除静态PropType。。。从您的代码中无法复制：。几乎可以肯定，在其他地方的代码中会发生另一个错误。如果不使用ES6语法，则会出现这种情况，但是如果使用ES6，则不会调用setInitialState（）。请参见，在不使用ES6语法时，这是正确的，但是在使用ES6时，不会调用setInitialState（）。请参见操作在
onMouseEnter
和
onMouseLeave
属性中调用
bind
，这也应该起作用。@Zach我看到了这种情况，但我认为可能需要在构造函数中而不是在渲染函数中完成。OP正在调用
onMouseEnter
和
onMouseLeave
属性中的
bind
，这也应该有效。@Zach我看到了这种情况，但我认为可能需要在构造函数中而不是在呈现函数中完成。