如何使用上下文和钩子切换布尔值?

Question

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

以下是我的上下文代码

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

相同的减速器代码如下

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 只是为了检查模态是否可见，然后它可以工作，但是单击按钮按下状态值不会改变，我无法看到模态，因为值总是假的

Answer 1

问题似乎出在onPress回调中：

onPress={() => {
const privacyVisibility_new = !privacyVisibility;
console.log( privacyVisibility_new );
setPrivacyVisibility( privacyVisibility_new );
setPrivacyPolicyModalVisibility( privacyVisibility:privacyVisibility_new );
}}

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

---

setPrivacyPolicyModalVisibility似乎不正确。我不确定调度的确切位置，但假设它与功能处于同一级别，您可以简单地在内部使用它。

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 中的 props，但在设置时我正在传递不同名称的 prop

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