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

Posted 2023-04-14

【中文标题】如何使用 Context 和 Hooks 切换布尔值？

【英文标题】：How to toggle a boolean value using Context and 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

【参考方案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 为我指明了正确的方向