it-roy-ru.com

ReactJS this.state null

Позвольте мне предварить это, сказав, что я новичок в ReactJS. Я пытаюсь учиться, делая простой сайт, который заполняет данные с помощью React. У меня есть файл JSON, который содержит данные о связях, которые будут зациклены с картой.

Я попытался установить его как состояние компонентов, а затем передать его ссылкам панели навигации через подпорку, но я получаю "Uncaught TypeError: Невозможно прочитать свойство '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')
);
51
Matthew Wisniewski

Используя ES6, в вашем конструкторе должно быть создано начальное состояние для класса компонента React, например:

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

Смотрите эта документация .

52
yussan

this.state.data является нулевым в вашем примере, потому что 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

9
Blair Anderson

На этот вопрос уже был дан ответ, но я пришел сюда с проблемой, которая может легко случиться с кем угодно.

Я получал console.log(this.state) для регистрации null в одном из моих методов, просто потому что я не писал:

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

в моем конструкторе.

Итак, если вы получаете null для this.state в одном из ваших методов, проверьте, привязали ли вы его к вашему компоненту.

Ура!

Редактировать (из-за вопроса @ tutiplain)

Почему я получаю null для this.state?

Потому что я написал console.log(this.state) в методе, который не был привязан к моему классу (мой метод handleSelect). Это привело к тому, что this указывает на некоторый объект выше в иерархии объектов (наиболее вероятно, на объект window), который не имеет свойства с именем state. Поэтому, привязав мой метод handleSelect к this, я заверил, что всякий раз, когда я пишу this в этом методе, он будет указывать на объект, в котором находится метод.

Я призываю вас прочитать действительно хорошее объяснение этого здесь .

9
Filip Savic

Более актуальный ответ, для использования ES7 + Классы:

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

ES6 Классы (уже ответили)

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