ReactJS this.state null

Question

Bunun için bana ReactJS için acemi olduğumu söyleyerek başlayayım. React kullanarak verileri dolduran basit bir site yaparak öğrenmeye çalışıyorum. Harita ile ilintilendirilecek bağlantı verilerini içeren bir JSON dosyanız var. Sonra bileşenler devlet olarak ayarlama bir pervane vasıtasıyla navbar bağlantıları geçirmeden ama "Yakalanmayan TypeError: null 'verilerini' özelliği okunamıyor" alıyorum çalıştık

ben etrafa bakmak çalıştı çözümler ama hiçbir şey bulamadı.

Not: Bir nesneyi sabit kodlamaya çalıştığımda ve bu yolla eşleme yaptığımda, harita döndürülemez. Ancak ben doğrudan setState hatası ile ilgili olduğundan emin değilim. setState() zaman uyumsuz olduğu için

/** @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 sizin örnekte boş. Bunun yerine şöyle setstate için bir geri arama geçirebilirsiniz: ES6 kullanma

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

, başlangıç ​​durumu Tepki bileşen sınıfı için Yapıcınızda oluşturulmalıdır, örneğin:

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

Bkz. this documentation.

Answer 3

Daha fiili cevap, ES7 + Sınıfları kullanmak için:

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

ES6 Sınıfları

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

Answer 4

Bu soru zaten yanıtlandı (alredy cevap verilmiştir), ama bir sorun alarak buraya geldiğini kimseye kolayca gelebilir.

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

benim oluşturucu içinde:

ben yazdım değil, sırf benim yöntemlerden birinde null giriş yapmak için bir console.log(this.state) başlamıştı.

Bu yöntem için, bu sistemler için bir null alıyorsanız, bileşeninize bağladığınızdan emin olun.

Şerefe!

Düzenleme (@ tutiplain sorusuna yüzünden)

Neden this.state için null başlamıştı?

Sınıfıma sınırlı olmayan yöntemde (benim handleSelect yöntemim) console.log(this.state) yazdım. Bu, state adlı bir özelliğe sahip olmayan nesne hiyerarşisinde (büyük olasılıkla window nesnesi) daha yüksek bir nesneyi işaret edecek neden oldu. Yani, handleSelect yöntemimi this'a bağlayarak, bu yöntemde her zaman this yazdığımda, yöntemin içinde bulunduğu nesneyi göstereceğinden emin oldum.

Bu here için gerçekten iyi bir açıklama okumanızı öneririz.