如何在使用react卸载组件时将状态切换为false

Question

我正在使用上下文切换对话框的状态。最初，状态isOpen设置为false。单击添加按钮时，状态isOpen为true，单击取消按钮将状态isOpen设置为false。

现在，当用户没有单击"取消"按钮时，即使用户导航到另一个页面，状态仍然为"打开"。

下面是我的代码，

function Main() {
return(
<DialogContextProvider>
<Parent/>
</DialogContextProvider>
);
}

function Parent() {
return (
<AddButton/>
);
}

function AddButton() {
const { isOpen, toggleDialog } = useDialogs();
return(
<Icon 
onClick={() => {
toggleDialog(true); //isOpen set to true
}}/>
{isOpen &&
<Dialog
onCancel={() => {
toggleDialog(false); //isOpen set to false
}}
);
}

interface DialogsState {
isOpen: boolean;
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
}
const initialState: DialogsState = {
isOpen: false,
setIsOpen: () => {},
};
const DialogsContext = React.createContext<DialogsState>(
initialState
);
export const DialogsContextProvider: React.FC = ({ children }) => {
const [isOpen, setOpen] = React.useState<boolean>(false);
return (
<DialogsContext.Provider
value={{isOpen,setOpen}}>
{children}
</DialogsContext.Provider>
);
};
export function useDialogs() {
const {
isOpen,
setOpen,
} = React.useContext(ScheduleDialogsContext);
const toggleDialog = (toggleValue: boolean) => {
setOpen(toggleValue);
};
return {
isOpen,
toggleDialog,
};
} 

我不知道如何在该对话框卸载时将状态isOpen设置为false，也就是说，当用户打开该对话框时，isOpen状态为true。如果用户没有单击对话框上的"取消"并移动到另一个页面，则仍然为"打开"状态。在那种情况下应该是假的。

我该怎么解决这个问题。有人能帮我吗？谢谢

Answer 1

您可以使用useEffect并从中返回一个函数，此fn将在组件卸载时调用例如

useEffect(() => {
// called on mount
return () => {
// called on unmount
}
}, [])

这里有一个链接供参考https://reactjs.org/docs/hooks-effect.html

Answer 2

useEffect钩子具有return，它在组件卸载时激发。

export const DialogsContextProvider: React.FC = ({ children }) => {
const [isOpen, setOpen] = React.useState<boolean>(false);
useEffect(() => {
return () => {
setOpen(false);
}
}, []);
return (
<DialogsContext.Provider
value={{isOpen,setOpen}}>
{children}
</DialogsContext.Provider>
);
};