componentDidmount在React天然中持续呈现

Question

我的目的是在其中添加带有进度栏的飞溅屏幕，因此我将React-Native-native-Progress用作进度栏的库。并通过执行登录检查来添加屏幕作为初始路线。

我正在使用redux，所以我创建了一个动作以在进度栏中执行进度过程，该操作的代码如下：

 export const progressBarLevel = () => {
return (dispatch) => {
    this.progress = 0;
    dispatch({ type: PROGRESS, payload: 0 });
    setTimeout(() => {
        this.indeterminate = false;
        setInterval(() => {
            this.progress += Math.random()/5;
            if(this.progress > 1){
                this.progress = 1;
            }
            return dispatch({ type: PROGRESS, payload: this.progress });
        },250)
    },500)
}
}   

然后，将其连接到还原器以节省进度。然后将进步状态带入飞溅屏幕并通过道具连接。

现在发生的事情是，我将ComponentDidmount（）（）的进度动作和登录检查操作都称为正常工作。但是由于某种原因，进度动作正在无限运行，因为我已经记录了操作，"返回派遣（{type：type：progress，有效载荷：this.progress}）；"这是无限派遣的。我找不到错误的起源。

我的componenetdidmount（）：

 componentWillMount() {
    this.props.loginCheck(() => {
        this.setState({ isUserAvailble: true})
    })
   this.props.progressBarLevel();
}

我的进度键代码：

<View style={{ alignItems: 'center' }}>
                    <ProgressBar progress={this.props.progressed} width={200} borderColor="#fff" color="#fff"/>
                </View>

我无法理解问题，如何停止连续渲染。我什至使用componentwillmount尝试了此操作，我也将获得连续的动作调度。

请指导。

update

将变量分配给setInterval，然后使用clear Interval解决问题

更新的代码

this.progress = 0;
    dispatch({ type: PROGRESS, payload: 0 });
    setTimeout(() => {
        this.indeterminate = false;
       const interval = setInterval(() => {
            this.progress += Math.random()/5;
            if(this.progress > 1){
                this.progress = 1;
                clearInterval(interval);
            }
            return dispatch({ type: PROGRESS, payload: this.progress });
        },250)
    },500)

Answer 1

查看您的代码，我认为问题是setInterval方法。

它没有被清除并更新状态树。

编辑1：您可以在以下代码下进行明确的间隔。

this.interval = setInterval(() => {
            this.progress += Math.random()/5;
            if(this.progress > 1){
                this.progress = 1;
            }
            if(this.progress === 1 && this.interval){
          clearInterval(this.interval);
}
            return dispatch({ type: PROGRESS, payload: this.progress });
        },250)