禁用按钮取决于redux的向上响应

Question

我当前显示依赖于updateReminderResponse对象的模态。

目前，您可以多次单击提交按钮。

单击按钮时，我如何禁用该按钮，直到UpdateVehicleReminder和saveNotifications得到解决，以及定义的updateReminderResponses：

const [disabled, setDisabled] = useState(false);
const onSubmit = async () => {
const success = await tryBiometrics();
if (success) {
setdisabled(true);
...

tagNotifications(state);
dispatch(
UpdateVehicleReminder(
...
)
);
try {
await saveNotifications(state.notificationList);
} catch (e) {
logger.error("Error saving notifications", e);
throw e;
}
}
setdisabled(false);
};
const disableSubmit =
disabled && typeof updateReminderResponses !== "undefined" ? true : false;
<Button
title="example"
buttonStyle={[buttons.primary]}
titleStyle={buttons.primaryTitle}
onPress={() => onSubmit()}
disabled={disableSubmit} // disable until updateReminderResponse is defined
/>;
{
updateReminderResponse && updateReminderResponse.updateFailure && (
<MessageModals showModal callback={closeFailModal} />
);
}
{
updateReminderResponse && updateReminderResponse.success && (
<MessageModals
showModal
successTick
modalBody={myVehiclesCmsContent.updateRemindersSuccessMessage}
callback={closeSuccessModal}
/>
);
}

Answer 1

不要跟踪状态中的禁用条件。它仅取决于updateReminderResponses的值。

只需测试该变量即可。

<Button ... disabled={typeof updateReminderResponses === 'undefined'}

Answer 2

您可以使用ref来保持按钮处于按下状态。它不会禁用该按钮，但可以控制多次提交。

请确保在需要时将按下的ref设置为false。

const pressed = useRef(false);

const onSubmit = async () => {
if(!pressed.current){
pressed.current = true
// your code
}
};