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

Question

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

现在，当用户不单击取消按钮时，即使用户导航到另一个页面，state isOpen 仍然为真。

下面是我的代码，

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,
    };
} 

当此对话框卸载时，我不确定如何将 state isOpen 设置为 false，这意味着当用户打开此对话框时 isOpen state 为 true。 如果用户没有在对话框上单击取消并移动到另一个页面，这 isOpen state 是真的。 在这种情况下它应该是错误的。

我怎样才能解决这个问题。 有人可以帮我吗？ 谢谢。

Answer 1

您可以使用useEffect并从中返回 function ，卸载组件时将调用此 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>
    );
};