英文:
How get get State objects when performing beforeunload in React
问题
以下是您要翻译的内容：
我有一个对象，我试图在 beforeunload 事件中保存到一个会话持续的数组中。
const { serviceRequest, serviceRequestOriginal, isDirty } = useAppSelector((state) => state.csmRequestDataReducer);
useEffect(() => {
window.addEventListener("beforeunload", (event) => {
console.log('beforeunload:' + isDirty);
console.log(current(serviceRequest));
console.log('beforeunload:' + isDirty);
dispatch(persistRequestTab({ currentSRCurrentState: isDirty ? serviceRequest : null, currentSRPreviousState: isDirty ? serviceRequestOriginal : null }));
console.log("页面重新加载前的API调用");
});
}, []);
然而，控制台输出显示 serviceRequest = null 和 isDirty = false。
为什么会这样，我该如何更改/修复以获取这些对象/值？
英文:
I have this object that I'm trying to save to an session persisted array with the beforeunload event
const { serviceRequest, serviceRequestOriginal, isDirty } = useAppSelector((state) => state.csmRequestDataReducer);
useEffect(() => {
window.addEventListener("beforeunload", (event) => {
console.log('beforeunload:' + isDirty);
console.log(current(serviceRequest));
console.log('beforeunload:' + isDirty);
dispatch(persistRequestTab({ currentSRCurrentState: isDirty ? serviceRequest : null, currentSRPreviousState: isDirty ? serviceRequestOriginal : null }));
console.log("API call before page reload");
});
}, []);
However the console output shows serviceRequest = null and isDirty = false.
Why is this and can I alter/fix to get these objects/values?
答案1
得分: 0
好的，以下是翻译的部分：
好的，我不确定这是否是一个完美的解决方案，但它似乎运行得很好。
在创建事件监听器时，它锁定了初始状态对象的值，使用 useRef() 可以解决这个问题，只需确保随着状态的更新更新引用，使用一些额外的 useEffect。
const { serviceRequest, serviceRequestOriginal, isDirty } = useAppSelector((state) => state.csmRequestDataReducer);
const currentSRRef = useRef<ServiceRequest | null>(serviceRequest);
const currentSROrigRef = useRef<ServiceRequest | null>(serviceRequestOriginal);
const currentIsDirtyRef = useRef<boolean>(isDirty);
useEffect(() => {
window.addEventListener("beforeunload", (event) => {
console.log('beforeunload:' + currentIsDirtyRef.current);
dispatch(persistRequestTab({ currentSRCurrentState: currentIsDirtyRef.current ? currentSRRef.current : null, currentSRPreviousState: currentIsDirtyRef.current ? currentSROrigRef.current : null }));
});
}, []);
useEffect(() => {
currentSRRef.current = serviceRequest;
currentIsDirtyRef.current = isDirty;
}, [serviceRequest])
useEffect(() => {
currentSROrigRef.current = serviceRequestOriginal;
}, [serviceRequestOriginal])
英文:
Ok so I don't know if this is a perfect resolution however it seems to work really well.
When creating the event listener it locks in the initial state objects values, using a reference useRef() will get around this, just make sure to update the reference as state is updated with some more useEffects.
const { serviceRequest, serviceRequestOriginal, isDirty } = useAppSelector((state) => state.csmRequestDataReducer);
const currentSRRef = useRef<ServiceRequest | null>(serviceRequest);
const currentSROrigRef = useRef<ServiceRequest | null>(serviceRequestOriginal);
const currentIsDirtyRef = useRef<boolean>(isDirty);
useEffect(() => {
window.addEventListener("beforeunload", (event) => {
console.log('beforeunload:' + currentIsDirtyRef.current);
dispatch(persistRequestTab({ currentSRCurrentState: currentIsDirtyRef.current ? currentSRRef.current : null, currentSRPreviousState: currentIsDirtyRef.current ? currentSROrigRef.current : null }));
});
}, []);
useEffect(() => {
currentSRRef.current = serviceRequest;
currentIsDirtyRef.current = isDirty;
}, [serviceRequest])
useEffect(() => {
currentSROrigRef.current = serviceRequestOriginal;
}, [serviceRequestOriginal])
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论