小编Dar*_*uma的帖子

我正在尝试创建一个加载组件，该组件将在React中使用setInterval每1000毫秒定期向div添加一个句点。我正在尝试使用文档中描述的方法清理setInterval。

https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1

import React, { useEffect, useState } from 'react'

const Loading = () => {
    const [loadingStatus, setLoadingStatus] = useState('.')
    const [loop, setLoop] = useState()
    useEffect(() => {
        setLoop(setInterval(() => {
            console.log("loading")
            setLoadingStatus(loadingStatus + ".")
        }, 1000))

        return function cleanup() {
            console.log('cleaning up')
            clearInterval(loop)
        }
    }, [])
    return (<p>
        {`Loading ${loadingStatus}`}
    </p>)
}
export default Loading

但是，loadingStatus变量仅更新一次，即使组件停止安装后，setInterval循环也不会清除。我必须使用类组件吗？