ReactJS this.state null

Question

Hãy để tôi bắt đầu bằng cách nói rằng tôi là người mới sử dụng ReactJS. Tôi đang cố gắng tìm hiểu bằng cách tạo một trang web đơn giản điền dữ liệu bằng React. Tôi có tệp JSON chứa dữ liệu liên kết sẽ được lặp qua bản đồ.

Tôi đã cố gắng thiết lập nó như là tình trạng các thành phần sau đó đi qua nó để các liên kết navbar qua một chỗ dựa nhưng tôi nhận được "lỗi chưa gặp: Không thể đọc thuộc 'dữ liệu' null"

tôi cố gắng nhìn xung quanh cho giải pháp nhưng không thể tìm thấy bất cứ điều gì.

Lưu ý: Khi tôi cố gắng mã hóa cứng đối tượng và ánh xạ qua đối tượng đó theo cách nó trả về bản đồ là không xác định. Tuy nhiên tôi không chắc chắn đó là trực tiếp liên quan đến lỗi 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 không có trong ví dụ của bạn vì setState() không đồng bộ. Thay vào đó bạn có thể vượt qua một callback để setstate như vậy:

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

Sử dụng ES6, tình trạng ban đầu phải được tạo ra trong constructor của bạn cho các lớp thành phần phản ứng, như thế này:

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

Xem this documentation.

Answer 3

Nhiều câu trả lời thực tế, sử dụng ES7 + Lớp học:

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

ES6 Lớp (alredy được trả lời)

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

Answer 4

Câu hỏi này đã được trả lời, nhưng tôi đến đây bằng cách có một vấn đề mà có thể dễ dàng xảy ra với bất kỳ ai.

Tôi đã nhận được một console.log(this.state) để đăng nhập null tại một trong những phương pháp của tôi, chỉ vì tôi đã không viết:

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

trong constructor của tôi.

Vì vậy, nếu bạn đang nhận được null cho điều này.state bằng một trong các phương pháp của bạn, hãy kiểm tra xem bạn đã ràng buộc nó với thành phần của bạn chưa.

Chúc mừng!

Sửa (vì câu hỏi @ tutiplain của)

Tại sao tôi nhận được null cho this.state?

Vì tôi đã viết console.log(this.state) trong phương pháp không bị ràng buộc vào lớp học của tôi (phương pháp handleSelect của tôi). Điều đó gây ra this để trỏ đến một số đối tượng cao hơn trong hệ thống phân cấp đối tượng (có thể là đối tượng window) mà không có thuộc tính có tên state. Vì vậy, bằng cách ràng buộc phương thức handleSelect của chúng tôi để this, tôi đảm bảo rằng bất cứ khi nào tôi viết this trong phương thức đó, nó sẽ trỏ đến đối tượng trong đó phương thức nằm trong đó.

Tôi khuyến khích bạn đọc giải thích thực sự tốt cho số here này.