javascript - 了解 Ajax 成功回调如何在此 ReactJS 示例中更新状态

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

Since we set data: comment, data is now merely the comment the form collected. But on success we take data and do this.setState({data: data});. Wouldn't that be setting the state to only one comment (the one we collected in the form?).

不，在示例中，传递给函数的 comment 正在为 ajax request 设置 data 属性。 success 回调中的 data 参数是来自 ajax response 的数据。

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