如何使用 Context 和 Hooks 切换布尔值？答案

【问题标题】：How to toggle a boolean value using Context and Hooks?如何使用 Context 和 Hooks 切换布尔值？
【发布时间】：2020-01-07 05:27:49
【问题描述】：

我正在使用ReactContext 和Hooks 在单击按钮时显示和隐藏Modal。

以下是我的上下文代码

const setPrivacyPolicyModalVisibility = dispatch => {
  return ({visible}) => {
    visible
      ? dispatch({type: 'enablePrivacyPolicyModalVisibility'})
      : dispatch({type: 'disablePrivacyPolicyModalVisibility'});
  };
};

相同的reducer代码如下

case 'enablePrivacyPolicyModalVisibility':
      return {...state, ...{enablePrivacyPolicy: true}};
case 'disablePrivacyPolicyModalVisibility':
      return {...state, ...{enablePrivacyPolicy: false}};

我班上的一些设置代码

const {state, setPrivacyPolicyModalVisibility} = useContext(Context);
  const [privacyVisibility, setPrivacyVisibility] = useState(false);

点击按钮我调用以下代码

<TouchableOpacity
        onPress={() => {
          setPrivacyVisibility(true);
          console.log(`${privacyVisibility}`);
          setPrivacyPolicyModalVisibility({privacyVisibility});
        }}.....

如您所见，我正在控制台记录 privacyVisibility 值，但它总是错误的，我无法理解

以下是我在组件中隐藏或显示模态的代码

{state.enablePrivacyPolicy ? (
        <SettingsPrivacyModal visible={true} />
      ) : (
        <SettingsPrivacyModal visible={false} />
      )}

模态代码是正确的，因为我尝试将默认值设置为 true 只是为了检查模态是否可见然后它可以工作，但是单击按钮时状态值不会改变，我无法看到模态该值始终为 false

【问题讨论】：

标签： react-native react-hooks react-context

【解决方案1】：

问题似乎出在onPress 回调中：

onPress={() => {
    const privacyVisibility_new = !privacyVisibility;

    console.log( privacyVisibility_new );

    setPrivacyVisibility( privacyVisibility_new );
    setPrivacyPolicyModalVisibility( privacyVisibility:privacyVisibility_new );
}}

当循环到达回调时，privacyVisibility 的默认值为false。我认为您假设一旦调用setPrivacyVisibility，privacyVisibility 变量将在同一个周期中具有新值；但在组件再次渲染之前它不会有更新的值。

setPrivacyPolicyModalVisibility 似乎不正确。我不确定 dispatch 到底在哪里，但假设它与函数处于同一级别，您可以简单地在内部使用它。

const setPrivacyPolicyModalVisibility = visible => {
    if ( visible ) {            
        dispatch({ type: "enablePrivacyPolicyModalVisibility" });
    } else {
        dispatch({ type: "disablePrivacyPolicyModalVisibility" });
    }
};

您可能希望简化您的 reducer 并直接发送 visible 值：

const setPrivacyPolicyModalVisibility = visible =>
    dispatch({ type: "setPrivacyPolicyModalVisibility", payload: visible });

case 'setPrivacyPolicyModalVisibility':
    return { ...state, is_privacyPolicy_visible: action.payload };

【讨论】：

在 setPrivacyPolicyModalVisibility 中我找不到变量调度

【解决方案2】：

其实错误很简单。我在 setPrivacyPolicyModalVisibility 中使用 visible 参数作为道具，但是在设置时我传递了不同名称的道具

感谢@Alvaro 为我指明了正确的方向

【讨论】：