ReactJS this.state null

ReactJS this.state null

---

제가 ReactJS의 초보자라고 말하면서 이 글을 시작하겠습니다. React를 사용하여 데이터를 채우는 간단한 사이트를 만들어 학습하려고 합니다. 지도와 함께 반복될 링크 데이터가 포함된 JSON 파일이 있습니다.

구성 요소 상태로 설정한 다음 소품을 통해 navbar 링크에 전달하려고 시도했지만 "Uncaught TypeError: Cannot read property 'data' of 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
    }
}

이 문서를 참조하십시오 .

---

이 질문은 이미 답이 나왔지만 누구에게나 쉽게 일어날 수 있는 문제가 있어서 여기까지 왔습니다.

내가 작성하지 않았기 때문에 내 방법 중 하나에 console.log(this.state)로그인해야 null했습니다.

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

내 생성자에서.

따라서 null메서드 중 하나에서 this.state에 대한 정보를 얻는 경우 구성 요소에 바인딩했는지 확인하세요.

건배!

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

왜 받았 었죠 null을 위해 this.state?

내가 쓴 때문에 console.log(this.state)내 수업 (내 handleSelect 방법)에 묶여되지 않은 방법. 그로 인해 이라는 속성이 없는 this개체 계층 구조에서 상위 개체(대부분 window개체) 를 가리킵니다 state. 따라서 내 handleSelect메서드를 에 바인딩 하여 해당 메서드를 this작성할 때마다 this메서드가 있는 개체를 가리킬 것이라고 확신 했습니다.

여기에서 이에 대한 정말 좋은 설명을 읽어보시기 바랍니다 .

---

this.state.datasetState()비동기 이기 때문에 예제에서 null입니다 . 대신 다음과 같이 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 : [] };
  }
  ...
}

---

I had similar issue. In my case it was webpack-dev-server not re-compiling my stuff on the run properly.
I used debugger to check variables and it was showing me weird stuff, so I figured it's something compilation related.
I just restarted the dev server to get it working again.
I think it's worth keeping in mind that such things do happen.

ReferenceURL : https://stackoverflow.com/questions/26408388/reactjs-this-state-null