组件更新时不会加载图像 - React.js

Question

我正在研究React with Rails中的评论功能，并且在评论组件中加载用户的头像时遇到一些麻烦。

首次加载时，我会在每个评论旁边找到一个带有头像（在Rails with Paperclip中设置）的评论列表。当我提交新评论时，会添加新评论，但所有化身都会消失。

另外，我已经通过使用strftime格式化的JBuilder发送了created_at字段。当我重新加载页面时，它看起来很好，但是一旦表单提交后组件更新，格式化就会消失。

这是我第一次尝试使用React，所以我确定我错过了一些东西。感谢大家的帮助。

滑轨

comments_controller.rb

  def index
    @comments = Comment.last(5)
  end

  def create
    @comment = Comment.new(comment_params)
    @comment.commentable = @event
    @comment.save

    if request.xhr?
      render :json => Comment.last(5)
      puts :json
    else
      redirect_to comments_path
    end
  end

  def comment_params
    params.require(:comment).permit(:body).merge(user_id: current_user.id)
  end

评论/ index.jbuilder

json.presenter do
    json.comments(@comments) do |comment|
        json.id comment.id
        json.body comment.body
        json.username comment.user.name
        json.avatar comment.user.logo.url(:medium)
        json.created_at comment.created_at.strftime("%I:%M%P %h %g")
    end
    json.form do
        json.action comments_path
        json.csrf_param request_forgery_protection_token
        json.csrf_token form_authenticity_token
    end
end

反应组件

comment_box.jsx

var CommentBox = React.createClass({
    getInitialState: function () {
        return this.props.presenter;
    },

    handleCommentSubmit: function ( formData, action ) {
        $.ajax({
            data: formData,
            url: action,
            type: "POST",
            dataType: "json",
            success: function ( data ) {
                this.setState({ comments: data });
            }.bind(this)
        });
    },

    render: function () {
        return (
            <div>
                <div className="row">
                    <div className="col-xs-12 col-md-7 ">
                        <CommentList comments={ this.state.comments } />
                    </div>
                    <hr/>
                </div>
                <div className="row">
                    <CommentForm form={ this.state.form } onCommentSubmit={ this.handleCommentSubmit }  />
                </div>
            </div>
        );
    }
});

comment_list.jsx

var CommentList = React.createClass({
    render: function () {
        var commentNodes = this.props.comments.map(function ( comment ) {
            return <Comment username={ comment.username}
                            avatar={ comment.avatar }
                            body={ comment.body }
                            created_at={ comment.created_at }
                             />
        });

        return (
            <div className="">
                <div className="row">
                    <div className="col-xs-12">
                        { commentNodes }
                    </div>
                </div>
            </div>
        )
    }
});

comment.jsx

var Comment = React.createClass({
    render: function () {

        return (
            <div>
                <div className="col-xs-2 " >
                    <div className="avatar">
                        <img src={this.props.avatar} alt="" className="img-responsive"/>
                    </div>
                    <br/>
                </div>
                <div className="col-xs-10" >
                    <div className="text-left">
                        <div className="comment-user"><i className="fa fa-user "></i><strong> { this.props.username }</strong></div>
                        <div className="comment-date"> {this.props.created_at}</div>
                    </div>
                    <div className="comment-post">
                        <p>{ this.props.body }</p>
                    </div>
                </div>
                <hr/>
            </div>
        )
    }
});

comment_form.jsx

var CommentForm = React.createClass({
    handleSubmit: function ( event ) {
        event.preventDefault();

        var body = this.refs.body.getDOMNode().value.trim();

        // validate
        if (!body) {
            return false;
        }

        // submit
        var formData = $( this.refs.form.getDOMNode() ).serialize();
        this.props.onCommentSubmit( formData, this.props.form.action );

        // reset form
        this.refs.body.getDOMNode().value = "";
    },

    render: function () {
        return (
                <div class="col-md-12">
                    <h5>Add a comment:</h5>
                    <form ref="form" className="comment-form" action={ this.props.form.action } acceptCharset="UTF-8" method="post" onSubmit={ this.handleSubmit }>
                        <p><input type="hidden" name={ this.props.form.csrf_param } value={ this.props.form.csrf_token } /></p>
                        <p><textarea ref="body" name="comment[body]" placeholder="Say something..." /></p>
                        <p><button type="submit" className="btn">Post comment</button></p>
                    </form>
                </div>
        )
    }
});