React Hook useEffect 缺少依赖项:'myDate' 和 'setMyDate'。要么包含它们,要么删除依赖数组。
如何将缺少的依赖项添加到useEffect
仅运行一次的依赖项中?以下示例生成上述警告:
const [ myDate, setMyDate ] = useState(0)
const spinner = useRef(null)
useEffect( () => {
spinner.current = setInterval( () => {
d = Date.now()
if (d < myDate)
setUpdate(d)
}, 997 )
}, [])
如果我包含它们,我会创建一个无限循环,因为setTimeout
依赖项的值会发生变化:
const spinner = useRef(null)
useEffect( () => {
spinner.current = setInterval( () => {
d = Date.now()
if (d < myDate)
setMyDate(d)
}, 997 )
}, [myDate, setMyDate])
如果我删除依赖数组,则useEffect
在每个渲染上运行,并设置无限数量的 setInterval:
const spinner = useRef(null)
useEffect( () => {
spinner.current = setInterval( () => {
d = Date.now()
if (d < myDate)
setMyDate(d)
}, 997 )
})
我也尝试useEffect
完全删除,认为既然spinner
是 a useRef
,它不会在每个组件渲染上重新分配......但没有:
const spinner = useRef(null)
spinner.current = setInterval( () => {
d = Date.now()
if (d < myDate)
setMyDate(d)
}
还尝试使用功能更新方法,像这样,但 lint 错误仍然存在并且代码不起作用:
const spinner = useRef(null)
useEffect( () => {
spinner.current = setInterval( () => {
d = Date.now()
setMyDate(d => {
if (d < myDate)
setMyDate(d)
}
}, 997 )
}, [setMyDate])
我被卡住了……夹在岩石和坚硬的地方之间!如何解决此 lint 警告?