Question

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

现在，当用户不单击“取消”按钮时，即使用户导航到另一个页面，状态isOpen仍为true。

下面是我的代码，

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。如果用户未单击对话框上的“取消”并移至另一页面，则此isOpen状态为true。在这种情况下应该是错误的。

我该如何解决。有人可以帮我吗？谢谢。

Answer 1

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

useEffect

这里是参考链接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>
    );
};

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

2 个答案: