Question

我正在考虑Reactjs Tutorial。我试图理解CommentForm组件如何通过将其传递给CommentBox来提交（或更新服务器）所收集的数据。

以下是两个可供参考的组件：

var CommentForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var author = React.findDOMNode(this.refs.author).value.trim();
    var text = React.findDOMNode(this.refs.text).value.trim();
    if (!text || !author) {
      return;
    }
    this.props.onCommentSubmit({author: author, text: text});
    React.findDOMNode(this.refs.author).value = '';
    React.findDOMNode(this.refs.text).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="text" />
        <input type="submit" value="Post" />
      </form>
    );
  }
});





var CommentBox = React.createClass({
  loadCommentsFromServer: function() {
    $.ajax({
      url: this.props.url,
      dataType: 'json',
      cache: false,
      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) {
    $.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">
        <h1>Comments</h1>
        <CommentList data={this.state.data} />
        <CommentForm onCommentSubmit={this.handleCommentSubmit} />
      </div>
    );
  }
});

我的混淆源来自CommentBox组件中的handleCommentSubmit，特别是Ajax成功回调。

由于我们设置data: comment，data现在只是表单收集的评论。但是在成功的时候我们会获取数据并执行this.setState({data: data});。不会将状态设置为只有一条评论（我们在表单中收集的评论？）。我们不需要从服务器提取所有数据，包括我们刚刚用loadCommentsFromServer这样的POST吗？这是如何工作的？

Answer 1

由于我们设置数据：注释，数据现在只是表单的注释集。但是在成功的时候我们会获取数据并执行this.setState（{data：数据}）;。不会将状态设置为只有一条评论（我们在表格中收集的一个？）。

不，在示例中，传入函数的comment正在为ajax 请求设置data属性。 data回调中的success参数是来自ajax 响应的数据。

因此，他们在这里将data状态属性设置为服务器响应的任何内容。我认为该示例假设服务器反映相同的注释，但这允许服务器在HTTP调用期间保存注释。

在此ReactJS示例中了解Ajax成功回调更新的状态

1 个答案: