我正在使用React Final Form创建表单。我有一个组件,在其中定义了确认模态框和处理它的Promise。函数实现如下所示:
现在的问题是,当用户第一次取消确认模态框后,如果再次点击保存按钮并再次点击确认,则无法工作。 如果用户第一次登陆页面,然后点击保存按钮,再点击确认按钮,那么它就可以工作。只有在取消一次后,接下来的确认才会失败。
我的发现: 当用户第一次取消时,rejectConfirm被调用,并将confirmPromise设置为rejected,在ManageForm的'openPromise'块中,await openPromise的值会被设置为rejected并停止代码。现在,当用户再次点击保存按钮时,如果用户尝试单击确认,则会调用resolvePromise,但是confirmPromise的值已经被rejectConfirm设置为拒绝(当用户第一次取消时),仍保持不变,即rejected。因此,ManageForm中的await openPromise再次返回拒绝,确认不起作用。
如何处理Promise以使其在第一次取消后继续进行后续的确认调用? 我不能在用户取消确认时重新渲染我的组件,因为这会删除所有已选择的表单值。
谢谢。
function Campaign() {
let resolveConfirm;
let rejectConfirm;
const confirmPromise = new Promise((resolve, reject) => {
resolveConfirm = resolve;
rejectConfirm = reject;
});
const modal = (
<ConfirmModal
name={MODAL_DISABLE_SOCIAL_CAMPAIGNS}
title={t('Confirm Uncheck')}
buttonText={t('Confirm')}
onConfirm={resolveConfirm}
modalEvents={{
onClose: () => {
try {
rejectConfirm();
} catch (e) {}
},
}}
>
<p>{t('Are you sure you want to disable ?')}</p>
</ConfirmModal>
);
return (
<OpenModal modal={modal}>
{(open) => (
<ManageForm
openConfirmModal={({ campaign }, form) => {
const isUnchecked = !campaign?.selected;
// If unchecked the selected checkbox only then
// confirm dialog box should get open
if (isUnchecked) {
open();
return confirmPromise;
}
return false;
}}
>
{(params) => {...
}}
</ManageForm>
)}
</OpenModal>
)
}
'ManageForm' 组件被导入到上面的 'Campaign' 组件中,并具有一个名为 'save' 的按钮,点击该按钮将调用提交方法并打开确认模态框,其中包括“取消”和“确认”选项。下面是 'ManageForm' 组件的实现:
import { Form } from 'react-final-form';
import Button from 'components/UI/Button';
function ManageForm(){
const {
openConfirmModal
} = props;
}
// This runs when clicked on a save button.
const handleSubmit = (formValues, form) => {
if (openConfirmModal) {
const openPromise = openConfirmModal(formValues, form);
if (openPromise) {
try {
await openPromise;
} catch (e) {
// Don't continue if the user cancelled the opening
return;
}
}
}
// Code after this will run only if openPromise is success.
// Here a network call happens via saveEndpoint method
const response = await saveEndpoint({ ...formValues });
}
return (
<Form
onSubmit={handleSubmit}
>
(formProps) => {
return (
<form>
....
<Button
label={t('button_label.save')}
type="submit"
appearance="brand"
/>
....
</form>
)}
</Form>
);
}
现在的问题是,当用户第一次取消确认模态框后,如果再次点击保存按钮并再次点击确认,则无法工作。 如果用户第一次登陆页面,然后点击保存按钮,再点击确认按钮,那么它就可以工作。只有在取消一次后,接下来的确认才会失败。
我的发现: 当用户第一次取消时,rejectConfirm被调用,并将confirmPromise设置为rejected,在ManageForm的'openPromise'块中,await openPromise的值会被设置为rejected并停止代码。现在,当用户再次点击保存按钮时,如果用户尝试单击确认,则会调用resolvePromise,但是confirmPromise的值已经被rejectConfirm设置为拒绝(当用户第一次取消时),仍保持不变,即rejected。因此,ManageForm中的await openPromise再次返回拒绝,确认不起作用。
如何处理Promise以使其在第一次取消后继续进行后续的确认调用? 我不能在用户取消确认时重新渲染我的组件,因为这会删除所有已选择的表单值。
谢谢。