Ad

React.js Component Has Null State?

- 1 answer

Html:

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>React Tutorial</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src='https://cdn.firebase.com/js/client/2.2.1/firebase.js'></script>

</head>
<body>
<div id="content">
  <!--<h1>Comments</h1>-->
  <!--<ul id="comments-list"></ul>-->
</div>
<!--<div id="input">-->
  <!--<input type="text" placeholder="Author" id="author-field">-->
  <!--<input type="text" placeholder="Comment" id="comment-field">-->
<!--</div>-->
<script type="text/babel" src="example.js"></script>
</body>
</html>

Js:

var Comment = React.createClass({
  render: function() {
    return (
      <div className="comment">
        <h4 className="commentAuthor">
          {this.props.author}
        </h4>
        <p>{this.props.comment}</p>
      </div>
    );
  }
});

var CommentBox = React.createClass({

  getInitialState: function () {
    return {data: [], author: "", comment: ""}
  },

  componentWillMount: function() {
    this.commentsDB = new Firebase('https://burning-fire-9280.firebaseio.com/comments');
    this.commentsDB.on("child_added", function(snap) {
      var nextData = this.state.data.concat(snap.val());
      this.setState(
        {data: nextData, comment: ""}
      )
    }).bind(this)
  },

  onAuthorChange: function(e) {
    e.preventDefault();
    this.setState({
      author: e.target.value
    });
  },

  onCommentChange: function (e) {
    e.preventDefault();
    this.setState({
      comment: e.target.value
    });
  },

  handleSubmit: function (e) {
    this.commentsDB.push({
      author: this.state.author, comment: this.state.comment, date: getEpoch()
    })
  },

  render: function() {
    return (
      <div className="commentBox">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm onAuthorChange={this.onAuthorChange} onCommentChange={this.onCommentChange} state={this.state}/>
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: function() {
    var commentNodes = this.props.data.map(function(entry) {
      return (
        <Comment author={entry.author} comment={entry.comment}>
        </Comment>
      );
    });
    return (
      <div className="commentList">
        {commentNodes}
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: function() {
    return (
      <form onSubmit={this.props.handleSubmit}>
        <input id="author-field" onChange={this.props.onAuthorChange} value={this.props.state.author} />
        <input id="comment-field" onChange={this.props.onCommentChange} value={this.props.state.comment} />
      </form>
    );
  }
});




ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

Error msg from chrome:

Uncaught TypeError: Cannot read property 'state' of null(anonymous function) @ example.js:25(anonymous function) @ firebase.js:52Ab @ firebase.js:47wb @ firebase.js:22xb @ firebase.js:21h.Cd @ firebase.js:194h.Bd @ firebase.js:182Zg.Bd @ firebase.js:174(anonymous function) @ firebase.js:172Ug @ firebase.js:166ua.onmessage @ firebase.js:165
firebase.js:40 FIREBASE WARNING: Exception was thrown by user callback. TypeError: Cannot read property 'state' of null
    at eval (eval at <anonymous> (https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js:4:28099), <anonymous>:35:26)
    at https://cdn.firebase.com/js/client/2.2.1/firebase.js:52:375
    at Ab (https://cdn.firebase.com/js/client/2.2.1/firebase.js:47:165)
    at wb (https://cdn.firebase.com/js/client/2.2.1/firebase.js:22:216)
    at xb (https://cdn.firebase.com/js/client/2.2.1/firebase.js:21:1261)
    at Bh.h.Cd (https://cdn.firebase.com/js/client/2.2.1/firebase.js:194:472)
    at kh.h.Bd (https://cdn.firebase.com/js/client/2.2.1/firebase.js:182:251)
    at Zg.Bd (https://cdn.firebase.com/js/client/2.2.1/firebase.js:174:364)
    at Rg.hg (https://cdn.firebase.com/js/client/2.2.1/firebase.js:172:281)
    at Ug (https://cdn.firebase.com/js/client/2.2.1/firebase.js:166:464) 

It seems to be complaining that the state of the CommentBox node is null, but the I have set the initial state to be {data: [], author: "", comment: ""}, haven't I?

Ad

Answer

It seems a little bit different. It says "cannot read property state of null" like if this is null (that is quite odd!!). What is the line 25?

Probably the bind call is in the wrong place:

componentWillMount: function() {
    this.commentsDB = new Firebase('https://burning-fire-9280.firebaseio.com/comments');
    this.commentsDB.on("child_added", function(snap) {
      var nextData = this.state.data.concat(snap.val());
      this.setState(
        {data: nextData, comment: ""}
      )
    }.bind(this)) // *** must be attached to the callback inside the parenthesis.
  },
Ad
source: stackoverflow.com
Ad