Javascript 在新状态或卸载时响应本机中断循环

我有一个React组件，我想在安装时创建一个循环，在卸载或

自动收集

状态更改时停止循环。在循环内部，有一个异步函数，因此每个行程都应该等待函数完成，然后再移动到下一个行程。点击

stop

按钮时，一切都应停止

我的当前和已断开的代码：

const AutoGather = ({autoGathering, stopAutoGather}) => {

    useEffect(() => {
        for (let i = 0; i < 5; i++) {
            if (autoGathering) {
                processAutoGather(i, autoGathering).then(() => {
                    console.log('other ', i)
                })
            } else {
                console.log('stopping')
                break
            }
        }
    }, [])


    // Some async function here, Database operation and probably a setTimeout
    const processAutoGather = async () => {
        return new Promise((resolve, reject) => {
            if (autoGathering) {
                setTimeout(() => {
                    console.log('resolving')
                    return resolve(true)
                }, 1000)
            } else {
                console.log('rejecting')
                return reject(false)
            }
        })
        
    }

    return (
        <Layout style={{flex:1}}>
            <Layout style={{flex:1}}>
                <Layout style={{flex:1, justifyContent:'center', alignItems:'center'}}>
                    <Button style={{borderRadius:20, minWidth:125}} onPress={()=> stopAutoGather()} status='danger' size='small'>Stop Auto Gather</Button>
                </Layout>
            </Layout>
        </Layout>
    )
}

AutoGather.propTypes = {
    autoGathering: PropTypes.bool.isRequired,
    materialToGather: PropTypes.string.isRequired,
    stopAutoGather: PropTypes.func.isRequired
}

export default AutoGather

const AutoGather=（{autogating，stop AutoGather}）=>{
useffect（（）=>{
for（设i=0；i<5；i++）{
if（自动收集）{
processAutoGather（i，autoGathering）。然后（（）=>{
console.log（'other'，i）
})
}否则{
console.log（'stopping'）
打破
}
}
}, [])
//这里有一些异步函数，数据库操作，可能还有一个setTimeout
const processAutoGather=async（）=>{
返回新承诺（（解决、拒绝）=>{
if（自动收集）{
设置超时（（）=>{
console.log（'resolving'）
返回解析（true）
}, 1000)
}否则{
console.log（'拒绝'）
退货拒绝（false）
}
})
}
返回(
stopAutoGather（）}status='danger'size='small'>停止自动收集
)
}
AutoGather.propTypes={
自动收集：需要PropTypes.bool.isRequired，
materialToGather:PropTypes.string.isRequired，
stopAutoGather:PropTypes.func.isRequired
}
导出默认自动聚集

在启动下一次会议之前，您可能希望等待会议结束。此外，您还需要清除

useffect

的依赖项：

//创建一个承诺并保存'resolve'，以便在其外部使用
常量自动聚集=（{自动聚集，停止自动聚集}）=>{
React.useffect（（）=>{
让停止计数=假；
（异步（）=>{
for（设i=0；i<5&！停止计数；i++）{
等待处理自动收集（i）；
console.log（'other'，i）；
}
})();
//停止计数！
return（）=>{stopTheCount=true}；
}, []);
//这里有一些异步函数，数据库操作，可能还有一个setTimeout
常量processAutoGather=async（计数器）=>{
返回自动收集
？新承诺（（决议）=>{
设置超时（（）=>{
if（自动收集）{
console.log（'resolving'）
返回解析（true）
}
}, 1000)
})
：Promise.resolve（）
}
返回（…）
}

我也尝试过类似的方法，问题是卸载时循环不会停止。当我以5为例时，它应该一直运行到停止。示例中的for循环只是我最后尝试的事情之一。添加了承诺中止机制。未测试。

我尝试过类似的方法。问题是卸载时循环不会停止

不，它不会停止，但如果

自动收集

为false，则调用的函数将不会执行任何操作。这有点棘手，可能有一些错误。您可能会使用

npm install simple abortable promise

预先输入类似于

simple abortable promise

的内容。更多关于和。将中止机制移到React组件之外。