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;

我收到此消息：

“显示”未定义为un-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

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

1 个答案: