Question

一旦用户对任何帖子发表评论，我都需要更新UI上的评论，我有一个父组件（其中显示了评论列表）和一个子组件（commentBox），我创建了一个函数，该函数在更新后会被调用子组件的数据并将其传递给父组件，这是我的代码

handleCommentData(data,index){
    if(this.state.postContentData != undefined && 
       this.state.postContentData != null && 
             this.state.postContentData != ""){
        if(this.state.postContentData[index].comments == null){
            this.state.postContentData[index].comments = [];
        }
        this.state.postContentData[index].comments.push(data.data);
    }
}

此处的postContentData是一个数组，其中存在一个注释键，其中注释又是对象数组，即

postContentData = [{"createdOn":1531287979671,
             "updatedOn":1531290897575,
             "deletedOn":0,
             "postCreatedBy":{},
             "createdAt":1531290897575,
             "audioType":false,
             "videoType":false,
             "imageType":false,
             "id":"bc46aa71-84cd-11e8-a011-59c285e9b8c6",
             "title":"",
             "content":"text",
             "medias":null,
             "comments":[
                  {
                    "createdOn":1531290846743,
                    "updatedOn":1531290846743,
                    "deletedOn":0,
                    "postId":"bc46aa71-84cd-11e8-a011-59c285e9b8c6",
                    "id":"692f2270-84d4-11e8-a011-59c285e9b8c6",
                    "commentByUserId":"630d8660-833b-11e8-9584-c9f6295e7d94",
                    "commentUserName":"net",

                    "commentId":null,
                    "comment":"comment 10",
                    "status":0,
                    "replyCount":0,
                    "mediaType":"TEXT",
                    "deleted":false
                },
                {
                    "createdOn":1531290783811,
                    "updatedOn":1531290783811,
                    "deletedOn":0,
                    "postId":"bc46aa71-84cd-11e8-a011-59c285e9b8c6",
                    "id":"43ac7930-84d4-11e8-a011-59c285e9b8c6",
                    "commentByUserId":"630d8660-833b-11e8-9584-c9f6295e7d94",
                   "commentUserName":"net",
                   "commentId":null,
                   "comment":"comment 9",
                   "status":0,
                   "replyCount":0,
                   "mediaType":"TEXT",
                   "deleted":false
                  }
         ]
   }]

现在，应该ComponentUpdate无法正常工作

shouldComponentUpdate(nextProps, nextState) {
    for(let i=0; i < this.state.postContentData.length; i++){
        for(let j=0; j < nextState.postContentData.length; j++){
            if(this.state.postContentData[i].comments != null && 
                 nextState.postContentData[j].comments != null){
                if(this.state.postContentData[i].comments.length !== 
                    nextState.postContentData[j].comments.length){
                    return true;
                } else {
                    return false;
                }
            }
        }
    }
}

handleCommentData函数之后渲染不更新。

Answer 1

您在forLoop内部使用return并不是正确的方法，因为您需要根据没有数据更改的事实来决定是返回true还是false

shouldComponentUpdate(nextProps, nextState) {
    const shouldRender = false;
    for(let i=0; i < this.state.postContentData.length; i++){
        for(let j=0; j < nextState.postContentData.length; j++){
            if(this.state.postContentData[i].comments != null && 
                 nextState.postContentData[j].comments != null){
                if(this.state.postContentData[i].comments.length !== 
                    nextState.postContentData[j].comments.length){
                    shouldRender = true;
                } 
            }
        }
    }
    return shouldRender;
}

shouldComponentUpdate在reactJS中不起作用

1 个答案: