How can I clear Interval in React?-CodePudding

I am using setInterval on react redux. Below is my function.

FileAction.js

export const SetPath = ({ path, location }) => async (dispatch) => {
    try {
        let interval;
        if (pre_path === path) {
            interval = setInterval(() => {
                handler(path);
            }, 3000);
        } else {
            pre_path = path;
            clearInterval(interval);
        }

        const handler = async (pth) => {
            const mtime = await axios.post('/api/file', { data: pth });
            dispatch({
                type: GET_EVENT,
                payload: { time: mtime, position: location }
            });
        }
    } catch (err) {
        dispatch({
            type: GET_ERROR
        });
    }
};

What I would like to do is when I call SetPath function, it have to fetch data from api/file every 3 secs.

But now when I pass another path to SetPath function, it dulicate interval.

How can I implement this?

CodePudding user response：

You are defining the interval variable inside setPath function, therefore the variable will be reinitialized everytime setPath is executed. Try defining it outside the function. You may need to use useRef in order to not lose the variable when a re-render occurs.