在新的 state 上反应原生中断循环或卸载

Question

I have a React component where I want to create a loop when it's mounted and stop the loop when it's unmounted or when autoGathering state changes. Inside the loop, there is an async function so each itineration should wait for the function to finish before moving to the next one. Everything should stop when Stop button is tapped.

My current and broken code:

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

Answer 1

You probably want to await the gathering to complete before launching the next one. Also, you need to clean dependencies of useEffect :

// Create a promise and save the `resolve` for using outside it
const AutoGather = ({autoGathering, stopAutoGather}) => {
    React.useEffect(() => {
      let stopTheCount = false;
      (async () => {
        for (let i = 0; i < 5 && !stopTheCount; i++) {
          await processAutoGather(i);
          console.log('other ', i);
        }
      })();

      // Stop the count!
      return () => { stopTheCount = true };
    }, []);

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

    return (...)
}