ReactJS this.state null

Question

讓我先說這個，說我是ReactJS的新手。我試圖通過使用React填充數據的簡單網站來學習。我有一個JSON文件，其中包含將通過地圖循環的鏈接數據。

我試圖將其設置爲組件的狀態，然後通過一個道具將它傳遞給導航欄鏈接，但我得到「遺漏的類型錯誤：無法讀取屬性空的‘數據’」

我試着到處尋找解決方案，但找不到任何東西。

注意：當我嘗試硬編碼一個對象並通過它映射它時，它返回的地圖是未定義的。但是我不確定這是否與setState錯誤直接相關。

/** @jsx React.DOM */ 

var conf = { 
    companyName: "Slant Hosting" 
    }; 

var NavbarLinks = React.createClass({ 
    render: function(){ 
    var navLinks = this.props.data.map(function(link){ 
     return(
     <li><a href={link.target}>{link.text}</a></li> 
    ); 
    }); 
    return(
     <ul className="nav navbar-nav"> 
     {navLinks} 
     </ul> 
    ) 
    } 
}); 

var NavbarBrand = React.createClass({ 
    render: function(){ 
    return(
     <a className="navbar-brand" href="#">{conf.companyName}</a> 
    ); 
    } 
}); 

var Navbar = React.createClass({ 
    getInitalState: function(){ 
    return{ 
     data : [] 
    }; 
    }, 
    loadNavbarJSON: function() { 
    $.ajax({ 
     url: "app/js/configs/navbar.json", 
     dataType: 'json', 
     success: function(data) { 
     this.setState({ 
      data: data 
     }); 
     console.log(data); 
     console.log(this.state.data); 
     }.bind(this), 
     error: function(xhr, status, err) { 
     console.error(this.props.url, status, err.toString()); 
     }.bind(this) 
    }); 
    }, 
    componentDidMount: function(){ 
    this.loadNavbarJSON(); 
    }, 
    render: function(){ 
    return(
     <nav className="navbar navbar-default navbar-fixed-top" role="navigation"> 
     <div className="container-fluid"> 
      <div className="navbar-header"> 
      <NavbarBrand /> 
      </div> 
      <NavbarLinks data={this.state.data} /> 
     </div> 
     </nav> 
    ); 
    } 
}); 

var Header = React.createClass({ 
    render: function(){ 
    return(
     <Navbar /> 
    ); 
    } 
}); 

React.renderComponent(
    <Header />, 
    document.getElementById('render') 
); 

Answer 1

this.state.data爲null，在你的例子，因爲setState()是異步。相反，你可以傳遞一個回調SETSTATE像這樣：

loadNavbarJSON: function() { 
    $.ajax({ 
     url: "app/js/configs/navbar.json", 
     dataType: 'json', 
     success: function(data) { 
     console.log(data); 

     this.setState({data: data}, function(){ 
      console.log(this.state.data); 
     }.bind(this)); 

     }.bind(this), 
    }); 
    } 

https://facebook.github.io/react/docs/component-api.html#setstate

Answer 2

使用ES6，初始狀態必須在構造函數中創建的陣營組件類，像這樣：

constructor(props) { 
    super(props) 
    this.state ={ 
    // Set your state here 
    } 
} 

見this documentation。

Answer 3

更實際的答案，使用ES7 +類：

export class Counter extends React.Component { 
    state = { data : [] }; 
    ... 
} 

ES6類（alredy得到的回答）

export class Component extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { data : [] }; 
    } 
    ... 
} 

Answer 4

這個問題已經回答了，但我來到這裏具有一個問題，很容易發生在任何人身上。

我得到一個console.log(this.state)在我的方法之一登錄null，只是因爲我還沒有寫道：

this.handleSelect = this.handleSelect.bind(this);

在我的構造函數。

因此，如果您在其中一個方法中獲得null for this.state，請檢查是否已將其綁定到您的組件。

乾杯！

編輯（因爲@ tutiplain的問題）

爲什麼我越來越null爲this.state？

因爲我寫了console.log(this.state)在我的類沒有約束的方法（我的handleSelect方法）。這導致this指向對象層次結構中較高的某個對象（最有可能是window對象），該對象沒有名爲state的屬性。因此，通過將我的handleSelect方法綁定到this，我確信，只要我在該方法中編寫this，它就會指向該方法所在的對象。

我鼓勵您閱讀關於此here的非常好的解釋。