我正在尝试创建一个加载组件,它会使用React中的setInterval每1000ms定期向div中添加一次句号。我正在尝试使用文档中描述的方法清理setInterval。
我正在尝试创建一个加载组件,它会使用React中的setInterval每1000ms定期向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 循环也不会被清除。我是否需要使用类组件来解决?