Question

我的目的是添加一个带有进度条的启动屏幕，因此我将react-native-progress用作进度条的库。并通过执行logincheck将屏幕添加为初始路线。

我正在使用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（）调用了进度操作和登录检查操作，因为两者都正常工作。但是由于某种原因，进度动作将无限运行，因为我已在控制台上记录了该动作“ return dispatch（{type：PROGRESS，payload：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尝试过，我也得到了连续的动作调度。

请指导。

更新

将变量分配给setInterval，然后使用clearInterval调用即可解决问题

更新代码

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)

componentDidMount在React Native中持续渲染

1 个答案: