Redux Store状态过时问题：SearchForm调用search获旧值

问题原因 #

你碰到的是React闭包捕获旧值的典型场景：

• 当handleConfirm里dispatch更新Redux状态后，立刻调用onClose（即handleModalClose），此时<SearchForm />还没完成重新渲染，search函数捕获的是当前渲染周期里的insuranceDetails——也就是更新前的初始空值。
• 而通过handleSearchClick直接调用search时，组件已经因为Redux状态更新完成了重新渲染，search捕获的是新的insuranceDetails值，所以能打印正确结果。

解决方案 #

方案1：让search实时从Redux Store取最新值

修改search函数，不依赖闭包中的旧值，而是在函数内部直接从Store获取最新状态：

// 用useCallback包裹，确保每次insuranceDetails更新时函数重新生成
const search = useCallback(async () => {
  const latestDetails = useAppSelector(state => state.search.insuranceDetails);
  console.log(latestDetails);
}, []);

如果search无法直接使用useAppSelector（比如是普通工具函数），可以借助Redux的getState方法（需配置redux-thunk中间件）：

const search = async () => {
  const latestDetails = store.getState().search.insuranceDetails;
  console.log(latestDetails);
};

方案2：调用search时传入最新值

修改调用逻辑，把Redux里的最新状态作为参数传给search：

// 修改handleModalClose，先取最新值再传入
const handleModalClose = () => {
  setIsModalOpen(false);
  const latestDetails = useAppSelector(state => state.search.insuranceDetails);
  search(latestDetails);
};

// 调整search函数接收参数
const search = async (details) => {
  console.log(details);
};

方案3：等待组件重新渲染后再调用search

用useEffect监听模态框状态变化，当模态框关闭后（组件已完成重新渲染）再执行search：

// 在SearchForm组件内添加useEffect
useEffect(() => {
  if (!isModalOpen) {
    search();
  }
}, [isModalOpen, search]); // 依赖项包含模态框状态和search函数

// 修改handleModalClose，仅关闭模态框
const handleModalClose = () => {
  setIsModalOpen(false);
};

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