Почему componentDidUpdate вызывает бесконечный цикл?

Question

[cajo]

У меня есть Link на страницу, на этой странице я вызываю в componentDidMount action который берет данные с сервера, когда я перехожу на эту страницу данные не берутся а выскакивает ошибка 403, после обновления страницы всё нормально, чтобы это обойти я сделал

componentDidMount() {
        this.props.loadData();
    }

    componentDidUpdate(prevProps) {
        if (prevProps.data !== this.props.data) {
            this.props.loadData();
        }
    }

Но теперь получается бесконечный цикл

Comments

[Aves]

this.props.data это объект небось?

[cajo]

Aves: массив обьектов

[Aves]

cajo: ну а они сравниваются по ссылке. loadData() наверняка же новый создает. Используй shalowCompare.

[cajo]

Aves: а по другому вообще не варик? да?

[Aves]

Хотя скорее какой-нибудь deepEqual. В общем, суть в том, что объекты равны, только если это один и тот же объект.

[Aves]

cajo: надо искать в чем была проблема с 403 ошибкой. С redux и componentDidMount всё должно работать и без костыля в componentDidUpdate.

[cajo]

Aves: я получаю access_token, на предыдущей странице, потом по ссылке перехожу на профиль где должен получить данные, тут точно в action проблема

[Aves]

cajo: Ну похоже запрос из componentDidMount отправляется без токена. ComponentDidUpdate даже без зацикливания тут ничем не поможет.

Как передается токен в action?

[cajo]

Aves: спасибо, да я лох просто, брал из куки и засовывал просто в константу с опциями для запроса, потом в экшене делал запрос, а теперь я просто передал токен параметром в экшн, если хочешь напиши это ответом, отмечу решением :)

[Aves]

cajo: Пожалуйста. Ответ про зацикливание уже написали, можно его отметить, я писать не хочу.

Answer 1

[Damir Makhmutov]

Если я правильно вас понял, то prevProps.data и this.props.data - это объекты.
Могу предположить каждый раз это ссылки на разные объекты, и вам нужно сравнивать конкретные свойства объекта.
Можно воспользоваться lodash и сделать так:

componentDidUpdate(prevProps) {
    if (!_.isEqual(prevProps.data, this.props.data)) {
        this.props.loadData();
    }
}

Comments

[cajo]

спасибо за ответ, я уже решил проблему :)