как изменить состояние в контексте реакции

Question

Как мне изменить состояние с истинного на ложное и с ложного на истинное?

это мой код:

import React, { createContext , useState } from 'react';

export const RegContext = createContext();

const RegContextProvider = (props) => {
    const[mode, setMode] = useState([
        { showing: false }
    ]);

    const changeMode = () => {
        setMode([...mode, { showing: !showing }]);
    };

    return (
        <RegContext.Provider value={{mode, changeMode}}>
            { props.children }
        </RegContext.Provider>
    );
}

export default RegContextProvider;

Я получил это сообщение:

'показ' не определен no-undef

Может кто-нибудь помочь мне решить эту проблему ??

Answer 1

Если все ваше состояние mode содержит логическое значение для показа, вы можете упростить его до

const RegContextProvider = (props) => {
    const [showing, setShowing] = useState(false);

    const changeMode = () => {
        setShowing(!showing);
    };

    return (
        <RegContext.Provider value={{showing, changeMode}}>
            { props.children }
        </RegContext.Provider>
    );
}

---

И, чтобы быть более безопасным, поскольку changeMode зависит от предыдущее состояние вы должны использовать синтаксис обратного вызова

const changeMode = () => {
    setShowing((showing)=>!showing);
};

Демо на https://codesandbox.io/s/bold-darkness-8iscu