Реагировать компонент с бесконечным обновлением

Question

У меня есть компонент React, и я буду бесконечно обновлять этот компонент всякий раз, когда я буду подключать его к избыточному каталогу и ссылаться на свойства из магазина. Если я просто ссылаюсь / подключаю одно свойство из магазина, бесконечное обновление не произойдет. Это происходит только тогда, когда я соединяю два или более, и я действительно не могу определить, почему это происходит.

Когда я добавлю shouldComponentUpdate, это фактически не остановит бесконечное обновление, а просто сильно замедлит его. Я действительно понятия не имею, что происходит.

import React, { Component } from 'react';

import { connect } from 'react-redux';

class UnreadMessages extends Component {
    constructor(props) {
        super(props);

        this.state = {
            messageReceived: false,
            unreadMessages: 0
        }

        this.unreadMessages = 0;
    }

    componentDidUpdate(prevProps, prevState) {
        if (prevProps.lastViewedMessageTime === this.props.lastViewedMessageTime) {
            this.setState({ messageReceived: true }, 
                () => {
                    setTimeout(
                        () => {
                            this.setState({ messageReceived: false });
                        }, 
                        300
                    );
                }
            );
        }

        const conOne = prevProps.messages.length !== this.props.messages.length;
        const conTwo = this.props.visible === false && window.innerWidth < 768;
        if (conTwo) {
            let index = this.props.messages.length - 1;
            const conOne = this.props.messages[index].type === 'chat.msg';
            const conTwo = this.props.messages[index].member_type === 'agent';
            if (conOne && conTwo) {
                this.setState({ 
                    unreadMessages: this.state.unreadMessages + 1 
                });
            }
        }

        if (this.props.visible === true) {
            this.setState({ unreadMessages: 0 });
        }
    }

    render () {
        let displayBadge = this.state.unreadMessages > 0 ? true : false;
        console.log('DISPLAY BAD', displayBadge)
        let pulse = this.state.messageReceived === true ? 'pulse' : '';
        console.log('PULSE', pulse)

        if (!displayBadge) {
            return null;
        }

        return (
            <span className={`msgBadge ${pulse}`}>{this.state.unreadMessages}</span>
        )
    }
}

function mapStateToProps(state) {
  return {
    lastViewedMessageTime: state.lastViewedMessageTime,
    messages: state.chats.toArray(),
    visible: state.visible
  };
}
export default connect(mapStateToProps, null)(UnreadMessages);

Answer 1

Вы устанавливаете состояние в componentDidUpdate, которое вызывает бесконечный рендер, так как lastViewedMessageTime остается неизменным.

Следовательно, он проверяет условие if (prevProps.lastViewedMessageTime === this.props.lastViewedMessageTime), которое будет истинным, поскольку вы его не меняете, поэтому он снова обновит состояние и т. Д. И т. Д.