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

Question

我正在使用 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}};

我的一些设置代码 class

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

点击按钮我调用以下代码

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

如您所见，我正在控制台记录 privacyVisibility 值，但它始终为 false，我无法理解

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

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

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

Answer 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" });
    }
};

您可能想要简化您的减速器并直接发送 visible 值：

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

.

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

Answer 2

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

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

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

How to toggle a boolean value using Context and Hooks?

react-native

react-context

react-hooks