如何在反应上下文中反转状态

Question

如何将状态从 true 更改为 false，将 false 更改为 true？

这是我的代码：

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;

我收到这条消息：

'showing' is not defined 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

如何在反应上下文中反转状态

how to reverse a state in react context

reactjs

react-context

react-hooks

use-state