如何在父模态框的异步提交函数中弹出二次确认模态框并等待用户操作结果

我看了你的代码，核心问题出在那个无限while循环上——JavaScript是单线程的，这个循环会死死占住主线程，根本没机会处理UI更新、用户点击事件这些异步任务，所以processingRef.current永远不会被更新为true，导致循环停不下来。

正确的解决方案：用Promise封装二次确认逻辑 #

我们不需要用轮询的方式等待用户操作，而是直接把二次确认框的显示逻辑封装成一个返回Promise的函数，用户点击确认/取消时再resolve/reject这个Promise，这样就能自然地等待用户操作，同时不会阻塞主线程。

具体修改步骤： #

1. 移除无效的状态和轮询代码
   删掉这些不需要的变量和钩子：

   // 删掉这些冗余代码
   const [userConfirmation, setUserConfirmation] = useState(false);
   const processingRef = React.useRef(null);
   const sleep = async () => { ... }
   useEffect(() => { ... }, [userConfirmation])
   

2. 封装二次确认框为Promise函数
   写一个专门的函数，显示确认模态框并返回Promise，用户操作时触发状态变更：

   const showConfirmModal = () => {
     return new Promise((resolve, reject) => {
       dispatch(modalContainerModel.actions.showModal({
         id: 'yes-no',
         props: {
           message: <Label>Are you sure?</Label>,
           onOk: () => resolve(true), // 用户点击确认，Promise成功resolve
           onCancel: () => reject(new Error('User cancelled the action')) // 用户取消，Promise拒绝
         }
       }))
     })
   }
   

3. 修改handleOk函数，使用封装好的确认逻辑
   在表单提交后，调用这个Promise函数，用try/catch处理用户取消的情况：

   const handleOk = async () => {
     return await ProvideAction(
       async () => {
         let result = false
         await form.handleSubmit(async (data) => {
           try {
             // 显示二次确认框，等待用户操作
             await showConfirmModal()
             // 只有用户确认后，才执行后续的核心请求
             await storageQuery.cancelReleaseRequest(rollbackNeeded)
             result = true
           } catch (err) {
             // 处理用户取消的情况，比如打印日志或给出提示
             console.log('User cancelled the operation:', err.message)
           }
         })();
         return result;
       }
     )
   }
   

为什么这个方法可行？ #

• 我们没有用同步循环阻塞主线程，而是把后续逻辑交给了Promise的回调函数，主线程可以正常处理UI渲染和用户交互。
• 用户点击确认/取消时，直接触发Promise的resolve/reject，后续代码会自动执行，完全符合JavaScript异步流程的逻辑。

内容来源于stack exchange