创建倒数计时器并使用来自 redux state 的数据时获得最大更新

Question

你们能帮我吗？ 我想渲染我的倒数计时器 HH:MM:SS。 但是，我的数据到state。 我的 setInterval 正在工作，但是当我尝试添加 setState 并传递数据以进行渲染时，它给了我一个错误。 Unhandled Rejection (Error): Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

另外，这是我的代码：

componentDidMount() {
        this.props.dispatch(questActions.getAll());
        this.props.dispatch(userActions.getAll(1, 100000));
        this.getTimeRemaining();

        this.interval = setInterval(() => {
                this.getTimeRemaining();
        }, 1000)
    }

    componentWillUnmount() {
        clearInterval(this.interval)
    }

    getTimeRemaining() {
        const { quests } = this.props || {}
        const questLists = quests?.items?.items;
        let today = moment();
    
        if (typeof questLists !== 'undefined') {
            questLists.forEach(questTimer => {
                let currentDate = today;
                let expiredDate = moment(questTimer.expiresAt);
                let timeRemaining = duration(expiredDate.diff(currentDate))

                let hours = timeRemaining.hours();
                let minutes = timeRemaining.minutes();
                let seconds = timeRemaining.seconds();

                //Adding to array to render display
                questTimer.hours = hours;
                questTimer.minutes = minutes;
                questTimer.seconds = seconds;

                this.setState({
                    hours,
                    minutes,
                    seconds
                })
                
            })
        }
    }

Answer 1

你有一个无限循环。 当组件按小时、分钟或秒更新时，您可能正在做一些事情。 此外，您每秒钟都在调用 setState function。 您确定要调用setInterval吗？ 每秒连接到 redux 商店以进行调度的目的是什么？ 也许一个setTimeout就足够了？

旁注：如果 redux 商店中的某些内容发生了更新，则无需调度即可获得其价值。 它也可以作为prop传递给您的组件，您的组件将自行更新。