ShouldComponentUpdate не работает в reactJS

Мне нужно обновить комментарии в пользовательском интерфейсе, как только пользователь прокомментирует любое сообщение, у меня есть родительский компонент (где был показан список комментариев) и дочерний компонент (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
                  }
         ]
   }]

Теперь shouldComponentUpdate не работает

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.

reactjs

11.07.2018 11:02

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

819

Ответы 1

Вы используете return внутри for Loop, что не является правильным способом, поскольку вам нужно решить, следует ли возвращать 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;
}

11.07.2018 11:11

Другие вопросы по теме

ValueGetter не работает с сгруппированными строками

Лучший способ загрузить модель в магазин redux при загрузке маршрута

Как создать подписанный apk из приложения Create React Native, а не React Native?

Использование вкладок пользовательского интерфейса материалов с помощью React

Как издеваться над jQuery .done (), чтобы он правильно работал с Jest?

Создайте новый массив из существующего массива в

Использование тернарности в mapStateToProps

ReactJS: Pngquant не удалось собрать, убедитесь, что установлен libpng-dev

ReactJS: получение данных из API

Ищу инструмент OCR для сканирования счетов, который я могу встроить в приложение React Native для академического проекта. Какие-либо предложения?

ShouldComponentUpdate не работает в reactJS

Ответы 1

Другие вопросы по теме

Похожие вопросы