Question

我正在尝试使用ReactJS并遵循他们的文档。我正在尝试存储新评论并显示它但是在提交表单后它没有显示新评论这里是我的代码

/** @jsx React.DOM */

  var CommentList = React.createClass({
    render: function() {
      var commentNodes = this.props.data.map(function(comment) {
        return (
          <Comment author={comment.author}>
          {comment.text}
          </Comment>
        );
      });
      return (
        <div className="CommentList">
          {commentNodes}
        </div>
      );
    }
  });
  var CommentBox = React.createClass({
    loadCommentsFromServer: function() {
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        success: function(data) {
          this.setState({data:data});
        }.bind(this),
        error: function(xhr, status, err) {
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    },
    handleCommentSubmit: function(comment) {
      var comments = this.state.data;
      var newComments = comments.concat([comment]);

      this.setState({data: newComments});
      $.ajax({

        url: this.props.url,
        dataType: 'json',
        type: 'POST',
        data: comment,
        success: function(data) {
          this.setState({data:data});

        }.bind(this),
        error: function(xhr, status, err) {
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    },
    getInitialState: function() {
      return {data: []};
    },
    componentDidMount: function() {
      this.loadCommentsFromServer();
      setInterval(this.loadCommentsFromServer, this.props.pollInterval);
    },
    render: function() {
      return (
        <div className="CommentBox">

        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
        <h1>Comments</h1>
        <CommentList data={this.state.data} />

        </div>
        );
    }
  });
  var converter = new Showdown.converter();
  var Comment = React.createClass({
    render: function() {
      var rawMarkup = converter.makeHtml(this.props.children.toString());
      return(
          <div className="Comment">
          <h2 className ="commentAuthor">
          {this.props.author}
          </h2>
          <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
          </div>
      );
    }
  });
  var CommentForm = React.createClass({
    handleSubmit: function(e) {
      e.preventDefault();
      var author = this.refs.author.getDOMNode().value.trim();

      var text = this.refs.com.getDOMNode().value.trim();
      if(!text || !author) {

        return;
      }
      this.props.onCommentSubmit({author:  author, text: text});
      this.refs.author.getDOMNode().value = '';
      this.refs.com.getDOMNode().value = '';
      return;
    },
    render: function() {
      return(
        <form className="commentForm" onSubmit={this.handleSubmit} >
        <input type="text" placeholder="Your Name"  ref="author" />
        <input type="text" placeholder="Say Something.."  ref="com" />
        <input type="submit" value="Post" />
        </form>
      );
    }
  });
  React.render(
    <CommentBox url="comment.json"  pollInterval={2000} />,
    document.getElementById('content')
  );

和comment.json

[
  {"author": "abc", "text": "This is one comment"},
  {"author": "pqr", "text": "This is *another* comment"}
]

Answer 1

只需删除

行即可

var newComments = comments.concat（[comment]）;

在handleCommentSubmit函数中添加行

comments.push（评语）;

它可以看到下面的handleCommentSubmit函数的完整代码

 handleCommentSubmit: function(comment) {
   var comments = this.state.data;
   comments.push(comment);
   this.setState({data: comments}, function() {

   $.ajax({
     url: this.props.url,
     dataType: 'json',
     type: 'POST',
     data: comment,
     success: function(data) {
       this.setState({data: data});
     }.bind(this),
     error: function(xhr, status, err) {
      console.error(this.props.url, status, err.toString());
    }.bind(this)
  });
 });
}

ReactJS没有显示新数据

1 个答案: