ReactJS this.state null

Question

मुझे यह कहकर प्रस्तावना दें कि मैं ReactJS के लिए नौसिखिया हूं। मैं एक साधारण साइट बनाकर सीखने की कोशिश कर रहा हूं जो प्रतिक्रिया का उपयोग कर डेटा को पॉप्युलेट करता है। मेरे पास एक JSON फ़ाइल है जिसमें लिंक डेटा है जो मानचित्र के साथ looped जाएगा।

मैं घटकों राज्य के रूप में यह तो स्थापित करने के लिए एक आधार के माध्यम से नेविगेशन बार लिंक करने के लिए इसे पारित लेकिन मैं हो रही है "Uncaught TypeError: अशक्त की 'डेटा' संपत्ति पढ़ा नहीं जा सकता" की कोशिश की है

मैं के लिए चारों ओर देखने की कोशिश की समाधान लेकिन कुछ भी नहीं मिला।

नोट: जब मैं किसी ऑब्जेक्ट को हार्ड कोड करने की कोशिश करता हूं और इस तरह से मैप करता हूं तो यह मानचित्र को वापस लाता है। हालांकि मुझे यकीन नहीं है कि सीधे सेटस्टेट त्रुटि से संबंधित है। क्योंकि setState() async है

/** @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 अपने उदाहरण में रिक्त है। इस तरह

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 का उपयोग करना, प्रारंभिक अवस्था प्रतिक्रिया घटक वर्ग के लिए अपने निर्माता में बनाया जाना चाहिए,: इसके बजाय आप ऐसा तरह setState को एक कॉलबैक पारित कर सकते हैं

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

यह सवाल पहले से ही उत्तर दिया गया है, लेकिन मैं यहाँ एक समस्या होने से आया था कि आसानी से किसी के साथ हो सकता है।

मैं अपने तरीकों में से एक में null लॉग इन करने के console.log(this.state) हो रही थी, सिर्फ इसलिए कि मैंने लिखा नहीं किया है:

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

मेरी निर्माता में।

तो, अगर आपको null मिल रहा है, तो अपनी विधियों में से एक में, यह जांचें कि आपने इसे अपने घटक से बांध दिया है।

चीयर्स!

संपादित (@ tutiplain के सवाल की वजह से)

मैं क्यों this.state के लिए null हो रही थी?

क्योंकि मैंने अपनी कक्षा (मेरे हैंडल चयन विधि) से जुड़ी विधि में console.log(this.state) लिखा था। इससे this ऑब्जेक्ट पदानुक्रम में अधिक ऑब्जेक्ट को इंगित करने के लिए कारण बनता है (संभवतः window ऑब्जेक्ट) जिसमें state नाम की कोई संपत्ति नहीं है। तो, handleSelect विधि this पर बाध्यकारी करके, मैंने आश्वासन दिया कि जब भी मैं उस विधि में this लिखता हूं, तो वह उस ऑब्जेक्ट को इंगित करेगा जिसमें विधि है।

मैं आपको इस here के लिए वास्तव में अच्छी व्याख्या पढ़ने के लिए प्रोत्साहित करता हूं।