React对话框关闭后重置状态的实现方案咨询

核心逻辑 #

当对话框的open状态从true切换为false时，将组件内所有临时状态重置为初始值，确保下次打开对话框时，显示的是原始数据而非未保存的修改内容。

具体实现步骤 #

1. 监听对话框的open状态变化 #

使用useEffect监听open属性，一旦对话框关闭（open变为false），立即触发状态重置：

useEffect(() => {
  if (!open) {
    resetDialogState();
  }
}, [open]);

2. 编写状态重置函数 #

创建resetDialogState函数，把所有本地状态恢复到初始值：

const resetDialogState = () => {
  // 深拷贝原始数据，避免引用污染原始的RegionalListData
  setRegionalList(JSON.parse(JSON.stringify(RegionalListData)));
  // 重置区域相关基础数据
  setData({
    regionName: "",
    marketName: "",
    subRegionName: "",
  });
  // 重置邮箱相关临时状态
  setRegionalId(null);
  setEmailCurrentIndex(null);
  setSelectedEmailId(null);
  setEmailOptions([]);
  setFetching(false);
};

3. 统一关闭触发逻辑 #

所有关闭对话框的入口（点击Cancel按钮、点击遮罩、ESC键、保存成功后自动关闭）都会改变open状态，而useEffect会自动监听这个变化并执行重置，不需要在每个关闭入口单独写重复逻辑。

4. 优化初始状态赋值（可选） #

为了避免初始化时引用原始数据导致意外修改，组件初始化时就对RegionalListData做深拷贝：

const [RegionalList, setRegionalList] = useState<IRegionalList[]>(
  JSON.parse(JSON.stringify(RegionalListData))
);

关键代码片段整合 #

const EditProperties: FC<EditPropertiesProps> = ({
  open,
  handleClose,
  selectedRow,
}) => {
  const dispatch = useAppDispatch();
  const [isEmailOpen, setOpenEmail] = useState(false);
  const [fetching, setFetching] = useState(false);
  // 初始化时深拷贝原始数据
  const [RegionalList, setRegionalList] = useState<IRegionalList[]>(
    JSON.parse(JSON.stringify(RegionalListData))
  );
  const [data, setData] = useState<IData>({
    regionName: "",
    marketName: "",
    subRegionName: "",
  });
  const [regionalId, setRegionalId] = useState<number | null>(null);
  const [emailCurrentIndex, setEmailCurrentIndex] = useState<number | null>(null);
  const [selectedEmailId, setSelectedEmailId] = useState<number | null>(null);
  const { isSuccess } = useAppSelector((state) => state.yardUser);
  const { isSaveSuccess } = useAppSelector((state) => state.region);
  const email = useAppSelector((state) => state.yardUser);
  const [emailOptions, setEmailOptions] = useState<IEmail[]>([]);

  // 重置状态函数
  const resetDialogState = () => {
    setRegionalList(JSON.parse(JSON.stringify(RegionalListData)));
    setData({
      regionName: "",
      marketName: "",
      subRegionName: "",
    });
    setRegionalId(null);
    setEmailCurrentIndex(null);
    setSelectedEmailId(null);
    setEmailOptions([]);
    setFetching(false);
  };

  // 监听对话框关闭事件
  useEffect(() => {
    if (!open) {
      resetDialogState();
    }
  }, [open]);

  // ... 其他原有逻辑和渲染代码
};

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