web-dev-qa-db-fra.com

ReactJS this.state null

Permettez-moi de commencer par dire que je suis un novice chez ReactJS. J'essaie d'apprendre en créant un site simple qui renseigne les données à l'aide de React. J'ai un fichier JSON qui contient des données de liaison qui seront bouclées avec map.

J'ai essayé de le définir comme état des composants, puis de le transmettre aux liens de la barre de navigation via un accessoire, mais je reçois le message "Uncaught TypeError: impossible de lire la propriété 'data' de null"

J'ai essayé de chercher des solutions, mais je n'ai rien trouvé.

Remarque: lorsque j'essaie de coder en dur un objet et de le mapper de cette manière, il renvoie mappage non défini. Cependant, je ne suis pas sûr que cela soit directement lié à l'erreur 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')
);
javascriptstatereactjs
53
Matthew Wisniewski

En utilisant ES6, l’état initial doit être créé dans votre constructeur pour la classe de composants React, comme ceci:

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

Voir cette documentation .

59
yussan

On a déjà répondu à cette question, mais je suis venu ici en ayant un problème qui peut facilement arriver à n'importe qui.

J'obtenais une console.log(this.state) pour enregistrer null dans l'une de mes méthodes, simplement parce que je n'avais pas écrit:

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

dans mon constructeur.

Donc, si vous obtenez un null pour this.state dans l’une de vos méthodes, vérifiez si vous l’a lié à votre composant.

À votre santé!

Edit (à cause de la question de @ tutiplain)

Pourquoi ai-je eu null pour this.state?

Parce que j'ai écrit console.log(this.state) dans la méthode qui n'était pas liée à ma classe (ma méthode handleSelect). Cela a amené this à pointer un objet plus haut dans la hiérarchie des objets (très probablement l'objet window) qui n'a pas de propriété nommée state. Donc, en liant ma méthode handleSelect à this, j’ai assuré que chaque fois que j’écrirais this dans cette méthode, il pointera vers l’objet dans lequel se trouve la méthode.

Je vous encourage à lire une très bonne explication pour ceci ici .

11
Filip Savic

this.state.data Est nul dans votre exemple car setState() est asynchrone. Au lieu de cela, vous pouvez passer un callback à setState comme ceci:

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

10
Blair Anderson

Réponse plus concrète, pour l’utilisation des classes ES7 +:

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

ES6 Classes (déjà répondu)

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

J'ai eu le même problème. Dans mon cas c'était webpack-dev-server ne pas re-compiler correctement mes affaires.
J'ai utilisé le débogueur pour vérifier les variables et cela me montrait des choses étranges, alors j’ai pensé que c’était quelque chose de lié à la compilation.
Je viens de redémarrer le serveur de développement pour le faire fonctionner à nouveau.
Je pense qu'il convient de garder à l'esprit que de telles choses se produisent.

0
Grigory Bogush