React中二级弹窗向根弹窗传数据时状态未即时更新需点击两次如何解决

问题根因 #

• React 状态更新为异步批量操作，调用setUserConfirmed后，当前作用域下的userConfirmed变量不会立刻更新，要等到组件下一次重渲染才能拿到最新值。
• 你当前的逻辑里，在一级弹窗「同意」按钮的点击事件中直接读取userConfirmed，此时二级弹窗的选择操作还未触发状态更新，拿到的永远是上一次操作后的旧值，这才导致需要点击两次才能看到更新结果。

解决方法 #

方案1：通过useEffect监听状态变化执行后续逻辑 #

把依赖userConfirmed的逻辑抽离到useEffect中，监听二级弹窗开关状态和用户确认状态的变化，当二级弹窗关闭后再执行对应操作：

// 新增useEffect监听状态
React.useEffect(() => {
  // 二级弹窗关闭时触发后续逻辑
  if (!openSecondDialog) {
    console.log("最新用户确认状态：", userConfirmed)
    // 此处放置你原本要在handleAgreeOnDialog1中执行的逻辑
    if (userConfirmed) {
      handleClose() // 示例：用户确认后关闭一级弹窗
    }
  }
}, [openSecondDialog, userConfirmed, handleClose])

// 原handleAgreeOnDialog1仅保留打开二级弹窗的逻辑
const handleAgreeOnDialog1 = () => {
  handleClickOpenSecondDialog();
};

方案2：回调中直接传值执行逻辑 #

无需等待状态更新，在二级弹窗的选择回调中直接把确认结果作为参数传给后续逻辑函数，避免读取旧状态：

// 新增后续逻辑处理函数
const handleAfterConfirm = (confirmed) => {
  console.log("用户选择结果：", confirmed)
  if (confirmed) {
    handleClose()
  }
}

// 修改二级弹窗的同意/拒绝回调
const handleAgreeOnSecondDialog = () => {
  const confirmed = true
  setUserConfirmed(confirmed);
  handleCloseSecondDialog();
  handleAfterConfirm(confirmed)
};
const handleDisagreeOnSecondDialog = () => {
  const confirmed = false
  setUserConfirmed(confirmed);
  handleCloseSecondDialog();
  handleAfterConfirm(confirmed)
};

内容的提问来源于stack exchange，提问作者krsna