[英]Check which dependency in useEffect was updated
我有这个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
有很多方法,对于您的用例,您应该选择最易读的方法。
useReducer
React Hook useEffect缺少依赖项:'tileSize'。 包括它或删除依赖项数组。 如果“ setTop”需要当前值“ tileSize”,也可以用useReducer替换多个useState变量。 (反应钩/详尽-DEPS)
const STATE = {
ADDITION: 'addition',
MULTIPLICATION: 'multiplication'
};
function reducer(state, action) {
switch (action.type) {
case STATE.ADDITION:
return {
...state,
position: action.position,
top: state.top + action.position * state.spriteSize
};
case STATE.MULTIPLICATION:
return {
...state,
spriteSize: action.spriteSize,
top: state.position * action.spriteSize
};
default:
throw new Error();
}
}
function Controller({ position, spriteSize }) {
const [state, dispatch] = useReducer(reducer, {
top: 0,
position,
spriteSize
});
useEffect(() => {
dispatch({ type: STATE.ADDITION, position });
}, [position]);
useEffect(() => {
dispatch({ type: STATE.MULTIPLICATION, spriteSize });
}, [spriteSize]);
return <FlexBox>{state.top}</FlexBox>;
}
useRef
并将其与旧值进行比较
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.