reactJS this.state null

reactJS this.state null

내가 리액션JS의 초보자라는 말로 이것을 서문하겠다.리액션을 사용하여 데이터를 채우는 간단한 사이트를 만들어 배우려고 한다.나는 지도로 루핑될 링크 데이터가 들어 있는 JSON 파일을 가지고 있다.

구성 요소 상태로 설정한 다음 소품을 통해 탐색 모음 링크에 전달하려고 했지만 "Uncaught TypeError: null의 속성 '데이터'를 읽을 수 없음"이 표시됨

나는 해결책을 찾으려고 노력했지만 아무것도 찾을 수 없었다.

참고: 객체를 하드 코딩하고 객체를 통해 지도를 반환하는 방식이 정의되지 않은 방식으로 매핑하려고 할 때.그러나 나는 그것이 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')
);

ES6를 사용하여 다음과 같이 React 구성 요소 클래스에 대한 초기 상태를 생성자에서 생성해야 한다.

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

이 설명서를 참조하십시오.

이 문제는 이미 답은 끝났지만 누구에게나 쉽게 일어날 수 있는 문제를 안고 여기까지 왔다.

나는 a를 받고 있었다.console.log(this.state)기록하다null내 방법 중 하나로, 단지 내가 글을 쓰지 않았다고 해서:

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

내 건설업자 중에

그래서, 만약 당신이 A를 받는다면.null이.state에 대해 두 가지 방법 중 하나로 구성 요소에 바인딩했는지 확인하십시오.

건배!

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

내가 왜 그랬을까?null을 위해this.state?

왜냐하면 내가 글을 썼기 때문이다.console.log(this.state)내 클래스에 제한되지 않은 메서드(my handleSelect method)에서.그것이 원인이 되었다.this객체 계층 구조에서 더 높은 어떤 객체를 가리키기 위해(대부분 아마도window객체)라는 이름의 속성이 없는 경우state그래서, 내 몸을 묶음으로써handleSelect에 대한 방법.this, 나는 내가 글을 쓸 때마다 확신했다.this그 방법으로, 그것은 방법이 있는 대상을 가리킬 것이다.

나는 네가 여기서 이것에 대한 정말 좋은 설명을 읽기를 권장한다.

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

ES7+ 클래스 사용에 대한 자세한 답변:

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

ES6 클래스(알레디가 응답됨)

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

나도 비슷한 문제가 있었어.내 경우에는 그랬다.webpack-dev-server내 물건을 제대로 재조정하지 않는 것 같아
다시 작동시키기 위해 개발 서버를 다시 시작했을 뿐이야

참조URL: https://stackoverflow.com/questions/26408388/reactjs-this-state-null