ReactJS this.state爲空

Question

我的組件內部值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> 
    ); 
    } 
} 

在控制檯我只看到null鼠標輸入，鼠標離開和接受新道具。

你有什麼想法爲什麼會發生？

謝謝！

Answer 1

如果您想設置初始狀態，則需要在構造函數中實現getInitialState()，而不是嘗試。

另外，在狀態上設置屬性的正確方法是使用setState({ static: false })而不是this.state.static = false。

Answer 2

我只需要解決這個問題，發現問題是你需要將你的方法綁定到對象。我在構造函數中做了這個，它解決了我的問題。

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