Как изменить значение контекста в функциональном компоненте?

Question

У меня есть контекст с именем StatusContext, например:

export const statusCtxInit = {
    open: false,
    toggleOpen() {
        this.open = !this.open;
    }
};

const StatusContext = React.createContext(statusCtxInit);
export default StatusContext

Все приложение упаковано с провайдером:

// ...
<StatusContext.Provider value={statusCtxInit}>
// ...

Для использования значений моего контекста я использую useContext в моем F C, и он работает, когда я получаю значение.

function MyComp() {
    const status = useContext(StatusContext);
    return (
        <div>
            {status.open
                ? `It's Open`
                : `It's Closed`}

            <button onClick={() => status.toggleOpen()}>
                Toggle
            </button>
        </div>
    )
}

export default MyComp

С другой стороны, я также хочу изменить контекст, вызвав toggleOpen, но это не так работать как я хочу. На самом деле значение меняется, но не влияет на MyComp.

Что я сделал не так? Что мне делать?

Answer 1

 const statusContext = React.createContext();

 const {Provider} = statusContext;
 //custom provider
 export const StatusProvider = ({children}) => {
 const [isOpen, setOpen] = React.useState(false);
 const toggle = () => setOpen(v => !v);
 return(
  <Provider value={{isOpen, toggle}}>
    {children}
  </Provider>

 )
}

//custom hook
export const useStatus = () => useContext(StatusContext);



 //usage
    function MyComp() {
    const status = useStatus();
    return (
        <div>
            {status.isOpen
                ? `It's Open`
                : `It's Closed`}

            <button onClick={() => status.toggle()}>
                Toggle
            </button>
        </div>
    )
}

export default MyComp