Question

我想在uploadbutton组件中使用上下文并使用钩子，以便可以在userbutton组件中使用状态。

我想做什么？

on the clicking, the button in uploadbutton the state isDialogOpen is set to true.
when isDialogOpen true should display UploadForm.
when isDialogOpen false Icon in userbutton to be displayed
when isDialogOpen true Icon in userbutton should not be displayed

为此，我正在使用context和useIsDialogOpen钩子。 useIsDialogOpen返回isDialogOpen状态，可以在usebutton中调用它，从而可以访问该状态。

下面是代码段

interface DialogCtxState {
    isDialogOpen: boolean;
    setIsDialogOpen: React.Dispatch<React.SetStateAction<boolean>>;
}

const initialDialogState: DialogCtxState = {
    isDialogOpen: false,
    setIsDialogOpen: () => {},
};

const DialogContext = React.createContext<DialogCtxState>(
    initialDialogState
);

export const DialogContextProvider: React.FC = ({ children }) => {
    const [isDialogOpen, setIsDialogOpen] = React.useState<boolean>(false);

    return (
        <DialogContext.Provider
            value={{
                isDialogOpen,
                setIsDialogOpen,
            }}
        >
            {children}
        </DialogContext.Provider>
    );
}


function UploadButton({ match }: Props) { //here i set the state isDialogOpen
    const { isDialogOpen, setIsDialogOpen } = React.useContext(DialogContext);

    const handle_click = () => {
        setIsDialogOpen(!isDialogOpen); //set the state
    };
    
    export const useDialogOpen() { //exporting this usehook such that the UserButton            can access 
        //the state
        const { isDialogOpen } = React.useContext(DialogContext);
        return isDialogOpen;
    }

    return (
        <DialogContextProvider>
            <>
                <Button onClick={handle_click}/>

                {isDialogOpen && ( //use the state
                    <UploadForm/>
                )}
            </>
        </DialogContextProvider>
    );
}


function UserButton() {
    const isDialogOpen = useIsDialogOpen();
    return (
        {!isDialogOpen && <Icon/>}
    );
}

出了什么问题？

在handle_click方法中（在UploadButton中），isDialogOpen为false，并且不会显示UploadForm。

我不确定我要去哪里。有人可以帮我吗谢谢。

Answer 1

Ciao，我认为您的问题是如何在isDialogOpen函数上设置handle_click。读取状态并直接设置它绝不是一个好主意。我的建议是像这样修改您的handle_click：

const handle_click = () => {
    let appo = isDialogOpen;
    setIsDialogOpen(!appo);
};

使用上下文不会更新反应状态吗？

1 个答案: