如何使用其他setState管理useReducer以及如何管理像DOM焦点这样的非纯操作?

Question

我读过化简器应该是纯函数。

然后我有 2 个问题：如果它们与化简器链接，如何管理其他 setState？以及如何处理像焦点HTML元素这样的DOM操作？

为了说明这一点，这是我使用非纯化简器的代码：

const ActDeclaration = () => {
const [errors, setErrors] = useState({})
const refPersonType = useRef()
const reducer = (state, action) => {
switch (action.type) {
case "internalNumber":
return { ...newState, internalNumber: action.payload }
case "profile": {
setErrors({}) // HERE
const errors = hasErrors(newState, setErrors)
if (!isEmpty(errors)) {
setErrors(errors) // HERE
refPersonType.current.scrollIntoView({ // HERE
behavior: "smooth",
block: "start",
})
}
return newState
}
default:
return newState
}
}
const [state, dispatch] = useReducer(reducer, {})

我使用setErrors来修改负责显示/管理错误的状态变量。

这会产生副作用吗？实际上，化简器中的 setErrors 会触发重新渲染吗？

在化简器的内部状态中管理错误状态对我来说并不理想，因为setErrors也由提交函数调用，该函数不依赖于化简器，这就是为什么我发现将错误分开是一个好主意。

第二个问题，ref重点。我怀疑这也是一个副作用。如何处理？我这样做是因为我有一个按钮，它在点击事件时调用调度函数，因此调用减速器函数。因此，reducer似乎是做焦点工作的合适人选。

感谢您的想法！

Answer 1

profile操作检查错误并同时在其中滚动似乎是错误的地方。

您可以在useEffect内的化简器外部或在事件处理程序中执行此操作，因为profile没有状态操作。