Question

我想在卸载对话框组件时将isOpen的状态切换为false。

我要做什么？

我正在使用上下文切换对话框的状态。最初，状态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
        }}
    );
}


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进行卸载的对话框。但是如果用户单击调用handlefileselection的输入按钮，这也会关闭对话框。

有人可以告诉我为什么即使未卸载组件也要调用useeffect。

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

编辑：

我尝试了什么？

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

react useeffect缺少依赖项toggleDialog。要么包含它，要么删除依赖数组

但是当我将其更改为这样

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

不能按预期工作。

Answer 1

不确定您要达到的目标的全部范围，但是您可以执行以下操作。单击对话框时会切换对话框。

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
            />
          )
        }
    );
}

如何使用useeffect在卸载时将状态设置为false？

1 个答案: