提问人：Brett Buchanan 提问时间：8/22/2023 更新时间：8/22/2023 访问量：20
React 使用效果清理函数将状态保存到数据库而不会遇到关闭问题
React useEffect cleanup function to save state to a database without running into closure probelms
问：
我知道这是一个关闭的问题。我的组件中的 reducer 中有状态，卸载后，我想将其保存到数据库中。
const [localState, dispatch] = useReducer(myReducer, initialState);
const handleUnmount = () => {
saveToDB(localState);
}
useEffect(() => {
return () => {
handleUnmount()
}
}, [])
卸载组件时，handleUnmount 函数中的 localState 已过时。
我尝试将handleUnmount包装在useCallback中，其中包含包含localState的依赖数组。我尝试将 localState 放在 useRef 中并在 handleUnmount 函数中引用它，但上述方法都不起作用。此外，如果在 useEffect 的依赖项数组中包含任何内容，则每次该值更改时，handleUnmount 函数都会运行，而不是仅在卸载时运行，这不太理想。这在 React 中可能吗？我将做任何事情，不必包含“保存”按钮，必须明确单击该按钮才能保存对数据库的更改......
答：
1赞
Tushar Shahi
8/22/2023
#1
Refs 是在这种情况下使用的逃生舱口。 它们将始终提供任何项的最新和最新值，并且不需要放入依赖项中。
您可以使用 useRef 来跟踪该值。
const [localState, dispatch] = useReducer(myReducer, initialState);
const stateRef = useRef(localState);
stateRef.current = localState;
useEffect(() => {
return () => {
saveToDB(stateRef.current);
}
}, [])
评论
0赞
Brett Buchanan
9/6/2023
非常感谢，忘记设置 stateRef.current = localState;在随后的重新渲染中。我选择将其放入 useEffect 中，这样我就可以准确地控制我想要保持同步状态的哪些部分
评论