ReactJS this.state null

Question

내가 ReactJS에 초보자라고 말하면서 머리말을 붙이겠습니다. React를 사용하여 데이터를 채우는 간단한 사이트를 만들어서 배우려고합니다. 지도를 통해 반복되는 링크 데이터가 포함 된 JSON 파일이 있습니다. 나는 다음 구성 요소 상태로 설정 소품을 통해 네비게이션 바에 링크에 전달하지만 "catch되지 않은 형식 오류를 : 널 (null)의 '데이터'속성을 읽을 수 없습니다"는 무엇입니까 시도

는

나는 주위를 찾기 위해 노력 솔루션을 찾을 수 있지만 아무것도 찾을 수 없습니다.

참고 : 오브젝트를 하드 코딩하고이를 통해 맵핑하면 맵이 리턴되지 않습니다. 그러나 그것은 setState 오류와 직접 관련이 있는지 확신하지 못합니다. 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를 위해 콜백을 전달할 수 있습니다 ES6를 사용

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

는, 초기 상태가 반작용 구성 요소 클래스에 대한 생성자에서 생성되어야하며, 다음과 같이 :

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

this documentation을 참조하십시오.

Answer 3

더 실제 대답, ES7 + 클래스 사용을 위해 :

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

ES6 클래스

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

Answer 4

이 질문에 이미 답하고있다 (alredy 대답했다),하지만 난 문제를함으로써 여기에 온 그 누구에게나 쉽게 일어날 수 있습니다.

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

을 내 생성자에서 :

나는 내가 쓴하지 않은해서, 내 방법 중 하나에 null를 기록하는 console.log(this.state)을 얻고 있었다.

따라서 메서드 중 하나에서 this.state에 null이 표시되면 구성 요소에 바인딩했는지 확인하십시오.

건배!

편집 (@의 tutiplain의 질문 때문에)

이유는 this.state에 대한 null을 얻고 있었다?

내 클래스 (내 handleSelect 메서드)에 바인딩되지 않은 메서드에 console.log(this.state)을 썼기 때문에. 이로 인해 this은 state이라는 속성이없는 개체 계층 구조의 일부 개체 (아마도 대부분 window 개체)를 가리 킵니다. 그래서 내 handleSelect 메서드를 this에 바인딩함으로써 그 메서드에 this을 쓸 때마다 메서드가있는 개체를 가리킬 것이라고 확신합니다.

나는이 here에 대한 정말 좋은 설명을 읽는 것이 좋습니다.