我有这个useEffect
钩子:
useEffect(() => {
setTop(t => t + (controller.position.y * tileSize))
setLeft(l => l + (controller.position.x * tileSize))
}, [controller.position])
我希望它仅在更改时才进行添加position
。如果tileSize
改变我只是想让它做乘法。
我试着把它放在两个useEffect
,但后来我收到React Hook useEffect has missing dependencies
警告:
useEffect(() => {
setTop(t => t + (controller.position.y * spriteSize))
setLeft(l => l + (controller.position.x * spriteSize))
}, [controller.position])
useEffect(() => {
setTop((controller.position.y * spriteSize))
setLeft((controller.position.x * spriteSize))
}, [spriteSize])
在这种情况下,最佳做法是什么?
编辑:
一个可重现的例子:
const [tileSize, setTileSize] = useState(0)
const controller = {
position: {
x: 0,
y: 0
}
}
useEffect(() => {
setTop(t => t + (controller.position.y * tileSize))
setLeft(l => l + (controller.position.x * tileSize))
}, [controller.position])
useEffect(() => {
setTop((controller.position.y * tileSize))
setLeft((controller.position.x * tileSize))
}, [tileSize])
const asdf = () => {
setTileSize(150)
}
return (
<div onClick={() => asdf()}>click me</div>
)
警告信息:
第 31 行:React Hook useEffect 缺少依赖项:'tileSize'。包括它或删除依赖数组。如果 'setTop' 需要 'tileSize' react-hooks/exhaustive-deps 的当前值,您也可以用 useReducer 替换多个 useState 变量
第 36 行:React Hook useEffect 缺少依赖项:'controller.position.x' 和 'controller.position.y'。要么包含它们,要么删除依赖数组 react-hooks/exhaustive-deps 第 46 行:无法访问的代码 no-unreachable