React.js组件具有空状态？

Question

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')
);

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)

似乎在抱怨CommentBox节点的状态为null，但是我将初始状态设置为{data: [], author: "", comment: ""} ，不是吗？

Answer 1

似乎有些不同。 它说“无法读取null的属性状态”，例如如果它为null（这很奇怪！）。 第25行是什么？

绑定调用可能在错误的位置：

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.
  },

React.js组件具有空状态？

问题描述

1 个解决方案

解决方案1
3 已采纳 2016-01-13 21:38:36

React.js组件具有空状态？

问题描述

1 个解决方案

解决方案1 3 已采纳 2016-01-13 21:38:36

解决方案1
3 已采纳 2016-01-13 21:38:36