如何在使用 useEffect 卸載時將 state 設置為 false？

Question

我想在對話框組件卸載時將 isOpen 的 state 切換為 false。

我想做什么？

我正在使用上下文切換對話框的 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
        }}
    );
}


function Dialog() {
    useEffect(() => {
        return () => {
            toggleDialog(false);
        };
    });
 
    handlefileselection = () => {
        //some logic to upload files
    }

    return (
        <input type='file' onChange={handlefileselection}/> //on clicking this the isOpen state is 
        //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,
    };
} 

在上面的代碼中，我使用 useeffect 和 return 關閉了卸載對話框。 但是，如果用戶單擊調用句柄文件選擇的輸入按鈕，這也會關閉對話框。

有人可以告訴我為什么即使沒有卸載組件也會調用useeffect。

有人可以幫我解決這個問題嗎？ 謝謝。

編輯：

我試過什么？

useEffect(() => {
    return () => {
        toggleDialog(false);
    };
}, []); //error here

react useeffect 缺少依賴項 toggleDialog。 要么包含它，要么刪除依賴數組

但是當我把它改成這樣

useEffect(() => {
    return () => {
        toggleDialog(false);
    };
}, [toggleDialog]);

沒有按預期工作。

Answer 1

不確定您想要實現的完整 scope，但您可以執行類似的操作。 因為這會在單擊時切換對話框。

function AddButton() {
   const { isOpen, toggleDialog } = useDialogs(false);
   const toggleOpen = () => {
     toggleDialog(!isOpen); // will toggle from false to true, back and forth. 
   }
    return(
        <Icon 
            onClick={toggleOpen}/>
         {isOpen && (
            <Dialog
                onCancel={null} // this will longer be needed as onClick handles the toggling
               toggleDialog(false); // isOpen set to false
            />
          )
        }
    );
}