diff --git a/frontend/src/components/review-list-view/review-comments.js b/frontend/src/components/review-list-view/review-comments.js
index 9594ab8dad..9aa9ba9b14 100644
--- a/frontend/src/components/review-list-view/review-comments.js
+++ b/frontend/src/components/review-list-view/review-comments.js
@@ -5,15 +5,14 @@ import { Button, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 're
 import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, draftFilePath, draftRepoID } from '../../utils/constants';
 import Loading from '../../components/loading.js';
-import reviewComment from '../../models/review-comment.js';
 import { username } from '../../utils/constants.js';
 
 import '../../css/review-comments.css';
 
 const commentPropTypes = {
-  getCommentsNumber: PropTypes.func.isRequired,
+  listComments: PropTypes.func.isRequired,
   inResizing: PropTypes.bool.isRequired,
-  commentsNumber: PropTypes.number,
+  commentsList: PropTypes.array.isRequired,
   scrollToQuote: PropTypes.func.isRequired
 };
 
@@ -22,7 +21,6 @@ class ReviewComments extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      commentsList: [],
       inResizing: false,
       commentFooterHeight: 25,
       showResolvedComment: true,
@@ -30,23 +28,6 @@ class ReviewComments extends React.Component {
     };
   }
 
-  listComments = (scroll) => {
-    seafileAPI.listComments(draftRepoID, draftFilePath).then((response) => {
-      let commentList = [];
-      response.data.comments.forEach(item => {
-        let commentItem = new reviewComment(item);
-        commentList.push(commentItem);
-      });
-      this.setState({ commentsList: commentList });
-      if (scroll) {
-        let that = this;
-        setTimeout(() => {
-          that.refs.commentsList.scrollTo(0, 10000);
-        }, 100);
-      }
-    });
-  }
-
   handleCommentChange = (event) => {
     this.setState({ comment: event.target.value });
   }
@@ -54,9 +35,8 @@ class ReviewComments extends React.Component {
   submitComment = () => {
     let comment = this.state.comment.trim();
     if (comment.length > 0) {
-      seafileAPI.postComment(draftRepoID, draftFilePath, comment).then(() => {
-        this.listComments(true);
-        this.props.getCommentsNumber();
+      seafileAPI.postComment(draftRepoID, draftFilePath, comment).then(() => {        
+        this.props.listComments();
       });
       this.setState({ comment: '' });
     }
@@ -64,15 +44,13 @@ class ReviewComments extends React.Component {
 
   resolveComment = (event) => {
     seafileAPI.updateComment(draftRepoID, event.target.id, 'true').then((res) => {
-      this.props.getCommentsNumber();
-      this.listComments();
+      this.props.listComments();
     });
   }
 
   editComment = (commentID, newComment) => {
     seafileAPI.updateComment(draftRepoID, commentID, null, null, newComment).then((res) => {
-      this.props.getCommentsNumber();
-      this.listComments();
+      this.props.listComments();
     });
   }
 
@@ -82,8 +60,7 @@ class ReviewComments extends React.Component {
 
   deleteComment = (event) => {
     seafileAPI.deleteComment(draftRepoID, event.target.id).then((res) => {
-      this.props.getCommentsNumber();
-      this.listComments();
+      this.props.listComments();
     });
   }
 
@@ -117,20 +94,18 @@ class ReviewComments extends React.Component {
     this.setState({ comment: '' });
   }
 
-  componentWillMount() {
-    this.listComments();
-  }
-
   componentWillReceiveProps(nextProps) {
-    if (this.props.commentsNumber !== nextProps.commentsNumber) {
-      this.listComments();
+    if (this.props.commentsList.length < nextProps.commentsList.length) {
+      let that = this;
+      setTimeout(() => {
+        that.refs.commentsList.scrollTo(0, 10000);
+      }, 100);
     }
   }
 
   render() {
     const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null;
-    const { commentsNumber } = this.props;
-    const { commentsList } = this.state;
+    const { commentsList } = this.props;
     return (
       <div className={(this.state.inResizing || this.props.inResizing)?
         'seafile-comment seafile-comment-resizing' : 'seafile-comment'}
@@ -148,33 +123,28 @@ class ReviewComments extends React.Component {
           </div>
         </div>
         <div style={{height:(100 - this.state.commentFooterHeight)+'%'}}>
-          {commentsNumber == 0 &&
+          {commentsList.length === 0 &&
             <div className="seafile-comment-list">
               <div className="comment-vacant">{gettext('No comment yet.')}</div>
             </div>
           }
-          {(commentsList.length === 0 && commentsNumber > 0) &&
-            <div className={'seafile-comment-list'}><Loading/></div>
-          }
-          {commentsList.length > 0 &&
-            <ul className="seafile-comment-list" ref='commentsList'>
-              {(commentsList.length > 0 && commentsNumber > 0) &&
-                commentsList.map((item, index) => {
-                  return (
-                    <CommentItem
-                      item={item}
-                      key={index}
-                      showResolvedComment={this.state.showResolvedComment}
-                      resolveComment={this.resolveComment}
-                      editComment={this.editComment}
-                      scrollToQuote={this.scrollToQuote}
-                      deleteComment={this.deleteComment}
-                    />
-                  );
-                })
-              }
-            </ul>
-          }
+          <ul className="seafile-comment-list" ref='commentsList'>
+            {(commentsList.length > 0) &&
+              commentsList.map((item, index) => {
+                return (
+                  <CommentItem
+                    item={item}
+                    key={index}
+                    showResolvedComment={this.state.showResolvedComment}
+                    resolveComment={this.resolveComment}
+                    editComment={this.editComment}
+                    scrollToQuote={this.scrollToQuote}
+                    deleteComment={this.deleteComment}
+                  />
+                );
+              })
+            }
+          </ul>
         </div>
         <div className="seafile-comment-footer" style={{height:this.state.commentFooterHeight+'%'}}>
           <div className="seafile-comment-row-resize" onMouseDown={this.onResizeMouseDown}></div>
@@ -186,9 +156,7 @@ class ReviewComments extends React.Component {
               onChange={this.handleCommentChange}
               clos="100" rows="3" warp="virtual"
             ></textarea>
-            <Button className="comment-btn" color="success"
-              size="sm" onClick={this.submitComment}>
-              {gettext('Submit')}</Button>
+            <Button className="comment-btn" color="success" size="sm" onClick={this.submitComment}>{gettext('Submit')}</Button>
           </div>
         </div>
       </div>
diff --git a/frontend/src/draft.js b/frontend/src/draft.js
index 882e2d4e9a..c62e17dffb 100644
--- a/frontend/src/draft.js
+++ b/frontend/src/draft.js
@@ -21,6 +21,7 @@ import classnames from 'classnames';
 import HistoryList from './pages/review/history-list';
 import { Value, Document, Block } from 'slate';
 import ModalPortal from './components/modal-portal';
+import reviewComment from './models/review-comment.js';
 
 import './assets/css/fa-solid.css';
 import './assets/css/fa-regular.css';
@@ -45,11 +46,10 @@ class Draft extends React.Component {
       isShowDiff: true,
       showDiffTip: false,
       activeTab: 'reviewInfo',
-      commentsNumber: null,
+      commentsList: [],
       changedNodes: [],
       originRepoName: '',
       isShowCommentDialog: false,
-      unresolvedComments: 0,
       activeItem: null,
       historyList: [],
       showReviewerDialog: false,
@@ -196,25 +196,16 @@ class Draft extends React.Component {
   }
 
   onHistoryListChange = (historyList) => {
-    this.setState({
-      historyList: historyList
-    });
+    this.setState({historyList: historyList });
   }
 
-  getCommentsNumber = () => {
+  listComments = () => {
     seafileAPI.listComments(draftRepoID, draftFilePath).then((res) => {
-      let number = res.data.total_count;
-      let comments = res.data.comments;
-      let unresolvedComments = 0;
-      for (let i = 0; i < res.data.total_count; i++) {
-        if (comments[i].resolved === false) {
-          unresolvedComments++;
-        }
-      }
-      this.setState({
-        commentsNumber: number,
-        unresolvedComments: unresolvedComments,
+      let commentsList = [];
+      res.data.comments.forEach((item) => {
+        commentsList.push(new reviewComment(item));
       });
+      this.setState({ commentsList: commentsList });
     });
   }
 
@@ -226,7 +217,7 @@ class Draft extends React.Component {
   }
 
   onCommentAdded = () => {
-    this.getCommentsNumber();
+    this.listComments();
     this.toggleCommentDialog();
   }
 
@@ -238,9 +229,7 @@ class Draft extends React.Component {
 
   getOriginRepoInfo = () => {
     seafileAPI.getRepoInfo(draftRepoID).then((res) => {
-      this.setState({
-        originRepoName: res.data.repo_name
-      });
+      this.setState({ originRepoName: res.data.repo_name });
     });
   }
 
@@ -488,6 +477,7 @@ class Draft extends React.Component {
   }
 
   showNavItem = (showTab) => {
+    const commentsNumber = this.state.commentsList.length;
     switch(showTab) {
       case 'info':
         return (
@@ -508,7 +498,7 @@ class Draft extends React.Component {
               onClick={() => {this.tabItemClick('comments');}}
             >
               <i className="fa fa-comments"></i>
-              {this.state.commentsNumber > 0 && <div className='comments-number'>{this.state.commentsNumber}</div>}
+              {commentsNumber > 0 && <div className='comments-number'>{commentsNumber}</div>}
             </NavLink>
           </NavItem>
         );
@@ -662,14 +652,11 @@ class Draft extends React.Component {
     this.setState({ rightPartWidth: rate });
   };
 
-  componentWillMount() {
-    this.getCommentsNumber();
-    this.listReviewers();
+  componentDidMount() {
     this.getOriginRepoInfo();
     this.getDraftInfo();
-  }
-
-  componentDidMount() {
+    this.listReviewers();
+    this.listComments();
     this.initialContent();
     document.addEventListener('selectionchange', this.setBtnPosition);
   }
@@ -744,12 +731,13 @@ class Draft extends React.Component {
   }
 
   render() {
+    const { draftInfo, reviewers, originRepoName } = this.state; 
     const onResizeMove = this.state.inResizing ? this.onResizeMouseMove : null;
     const draftLink = siteRoot + 'lib/' + draftRepoID + '/file' + draftFilePath + '?mode=edit';
     const freezePublish = (this.state.freezePublish || draftStatus === 'published') ? true : false;
     const canPublish = !this.state.freezePublish && draftFileExists && filePermission == 'rw';
-    const time = moment(this.state.draftInfo.mtime * 1000).format('YYYY-MM-DD HH:mm');
-    const url = `${siteRoot}profile/${encodeURIComponent(this.state.draftInfo.last_modifier_email)}/`;
+    const time = moment(draftInfo.mtime * 1000).format('YYYY-MM-DD HH:mm');
+    const url = `${siteRoot}profile/${encodeURIComponent(draftInfo.last_modifier_email)}/`;
     return(
       <div className="wrapper">
         <div id="header" className="header review">
@@ -762,9 +750,9 @@ class Draft extends React.Component {
                 <span className="file-name">{draftFileName}</span>
                 <span className="mx-2 file-review">{gettext('Review')}</span>
               </div>
-              {(!freezePublish && this.state.draftInfo.mtime) &&
+              {(!freezePublish && draftInfo.mtime) &&
                 <div className="last-modification">
-                  <a href={url}>{this.state.draftInfo.last_modifier_name}</a><span className="mx-1">{time}</span>
+                  <a href={url}>{draftInfo.last_modifier_name}</a><span className="mx-1">{time}</span>
                 </div>
               }
             </div>
@@ -777,20 +765,12 @@ class Draft extends React.Component {
               </a>
             }
             {canPublish &&
-              <button 
-                className='btn btn-success file-operation-btn' 
-                title={gettext('Publish draft')}
-                onClick={this.onPublishDraft}
-              >
+              <button className='btn btn-success file-operation-btn' title={gettext('Publish draft')} onClick={this.onPublishDraft}>
                 {gettext('Publish')}
               </button>
             }
             {freezePublish &&
-              <button 
-                className='btn btn-success file-operation-btn' 
-                title={gettext('Published')}
-                disabled
-              >
+              <button className='btn btn-success file-operation-btn' title={gettext('Published')} disabled>
                 {gettext('Published')}
               </button>
             }
@@ -817,25 +797,23 @@ class Draft extends React.Component {
                   <TabPane tabId="reviewInfo">
                     <div className="review-side-panel-body">
                       <SidePanelReviewers
-                        reviewers={this.state.reviewers}
+                        reviewers={reviewers}
                         toggleAddReviewerDialog={this.toggleAddReviewerDialog}/>
                       <SidePanelAuthor/>
-                      {draftFileExists &&
-                        <UnresolvedComments number={this.state.unresolvedComments}/>
-                      }
+                      {draftFileExists && <UnresolvedComments commentsList={this.state.commentsList}/>}
                       {(this.state.isShowDiff === true && this.state.changedNodes.length > 0) &&
                       <SidePanelChanges
                         changedNumber={this.state.changedNodes.length}
                         scrollToChangedNode={this.scrollToChangedNode}/>
                       }
-                      <SidePanelOrigin originRepoName={this.state.originRepoName} draftInfo={this.state.draftInfo}/>
+                      <SidePanelOrigin originRepoName={originRepoName} draftInfo={draftInfo}/>
                     </div>
                   </TabPane>
                   <TabPane tabId="comments" className="comments">
                     <ReviewComments
                       scrollToQuote={this.scrollToQuote}
-                      getCommentsNumber={this.getCommentsNumber}
-                      commentsNumber={this.state.commentsNumber}
+                      listComments={this.listComments}
+                      commentsList={this.state.commentsList}
                       inResizing={false}
                     />
                   </TabPane>
@@ -859,7 +837,7 @@ class Draft extends React.Component {
               showReviewerDialog={this.state.showReviewerDialog}
               toggleAddReviewerDialog={this.toggleAddReviewerDialog}
               draftID={draftID}
-              reviewers={this.state.reviewers}
+              reviewers={reviewers}
             />
           </ModalPortal>
         }
@@ -967,11 +945,20 @@ class UnresolvedComments extends React.Component {
   }
 
   render() {
+    const { commentsList } = this.props;
+    let unresolvedNumber = 0;
+    if (commentsList) {
+      for (let i = 0, count = commentsList.length; i < count; i++) {
+        if (commentsList[i].resolved === false) {
+          unresolvedNumber++;
+        }
+      }
+    }
     return (
       <div className="review-side-panel-item">
         <div className="review-side-panel-header">{gettext('Comments')}</div>
         <div className="changes-info">
-          <span>{gettext('Unresolved comments:')}{' '}{this.props.number}</span>
+          <span>{gettext('Unresolved comments:')}{' '}{unresolvedNumber}</span>
         </div>
       </div>
     );
@@ -979,7 +966,7 @@ class UnresolvedComments extends React.Component {
 }
 
 const UnresolvedCommentsPropTypes = {
-  number: PropTypes.number.isRequired
+  commentsList: PropTypes.array.isRequired,
 };
 
 UnresolvedComments.propTypes = UnresolvedCommentsPropTypes;