React关闭抽屉时如何在两个setState完成后执行第三个setState？

问题原因 #

React的setState是异步批量更新机制，你当前代码里的三个setState会被合并处理，但视觉上data的清空操作可能先完成，导致错误提示先出现，之后抽屉才完全关闭，所以产生了闪现的情况。

可行解决方案 #

方案一：用useEffect监听抽屉状态 #

通过监听两个抽屉的关闭状态，只有当两者都处于关闭状态（false）时，再执行清空data的操作，确保时序正确。

代码实现：

import { useEffect } from 'react';

// 组件内部
useEffect(() => {
  // 两个抽屉都关闭时才清空data
  if (!closeDrawer1 && !closeDrawer2) {
    setData(null);
  }
}, [closeDrawer1, closeDrawer2]);

const onDrawerClose = () => {
  setCloseDrawer1(false);
  setCloseDrawer2(false);
};

方案二：利用setState的回调（仅类组件适用） #

如果你的组件是类组件，可以通过setState的回调函数链式调用，确保前两个状态更新完成后再清空data：

onDrawerClose = () => {
  this.setState({ closeDrawer1: false }, () => {
    this.setState({ closeDrawer2: false }, () => {
      this.setState({ data: null });
    });
  });
};

说明 #

函数组件优先用方案一，useEffect能精准监听状态变化，逻辑清晰且符合React函数组件的设计模式；类组件可以用方案二的回调链式调用，保证状态更新的顺序。

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