如果我将movement添加到useCallback依赖数组中，我会得到一个无限循环，但如果没有它，我会收到添加它的警告。
在保持状态作为对象的同时，处理这一问题的正确方法是什么？
// state
const [
{ movement, start, ..., ..., ...},
setState,
] = useState({
movement: 0,
start: 0,
.... ,
.... ,
.... ,
...
// handler
const handleMouseMove = useCallback(
({ xpos }) => {
const walk = xpos - start
const atStart = walk + movement > 0
setState(state => ({
...state,
movement: atStart ? 0 : walk + movement,
}))
},
[start]
)
使用React.useState时，请确保不要存储对象。在这里，您应该为movement和start创建两个不同的状态变量。这应该能解决你的问题。
如果你想存储一个复杂的状态，你可以看看React.useReducer。
setState(state => ({
...state,
movement: atStart ? 0 : walk + movement,
}))
实际上，您在setState中使用了更新的移动，这会导致它每次都发生变化，从而导致无限循环。你应该在上面使用previousState移动。
setState(state => ({
...state,
movement: atStart ? 0 : walk + state.movement,
}))
删除依赖项。
const handleMouseMove = useCallback(
({ xpos }) => {
setState(state => {
let walk = xpos - state.start
let atStart = walk + state.movement > 0
return {
...state,
movement: atStart ? 0 : walk + state.movement,
}
})
},
[]
)