问题描述:

I am working thought the Reactjs Tutorial. I am trying to understand how the CommentForm component submits (or updates the server) with the data it has collected via passing it up to the CommentBox.

Here are the two components that work for reference:

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>

);

}

});

My source of confusion comes from handleCommentSubmit in the CommentBox component, specifically the Ajax success callback.

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?). Wouldn't we need to pull from the server to get all of the data, including the POST we just made with something like loadCommentsFromServer? How does this work?

网友答案:

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?).

No, in the example, the comment passed in to the function is setting the data property for the ajax request. The data parameter in the success callback is the data from the ajax response.

So, here they are setting the data state property to whatever the server responds with. I think the example assumes that the server is reflecting the same comment, but this allows the server to save the comment during the HTTP call.

相关阅读:
Top