React项目中如何保证Select关闭、setFilters更新完成后再触发后端请求

React 的状态更新（setFilters）属于异步批量操作，你在 Select 的 onChange 事件中触发筛选条件更新，状态还没完成更新就立刻触发了 onClose 回调里的 fetchData，此时读取到的 filters 还是更新前的旧值，所以出现了时序问题。

推荐优先选择改动最小、最符合需求的方案1：

方案1：调整状态更新时机 + 依赖监听触发请求 #

你本身的需求就是仅在关闭 Select 时才应用筛选，完全不需要每次选中选项就更新父组件筛选状态，可以把筛选值同步逻辑移到关闭时执行，再通过 useEffect 监听筛选状态变更自动触发请求，从根本上避免时序问题：

1. 父组件修改：

const onChangeFilter = (name, value) => {
    setFilters(prevState => ({ ...prevState, [name]: value }));
};

// 清空原onCloseFilter里的fetchData调用
const onCloseFilter = () => {};

// 新增useEffect，filters更新完成后自动触发请求
useEffect(() => {
    fetchData();
}, [filters]);

2. SelectOptions组件修改：

const onChangeOption = event => {
  const { value } = event.target;
  setOption(value);
  // 删掉这里的onChangeFilter调用，不要每次选择都同步父组件状态
};

// 修改Select的onClose回调
<Select
  {/* 其余原有属性保持不变 */}
  onClose={() => {
    onChangeFilter(name, option); // 关闭时才把最终选中值同步给父组件
    onCloseFilter();
  }}
>

这个方案既保证了只有关闭 Select 时才会更新筛选条件、触发请求，又通过 useEffect 的依赖机制，确保永远是最新的 filters 生效后才调用接口，不会产生多余请求。

方案2：新增请求触发标记（适合需要实时更新filters的场景） #

如果你有其他业务逻辑需要每次选中选项就实时更新 filters，可以新增一个状态标记是否需要触发请求：

// 父组件新增状态
const [shouldFetch, setShouldFetch] = useState(false);

const onChangeFilter = (name, value) => {
    setFilters(prevState => ({ ...prevState, [name]: value }));
};

const onCloseFilter = () => {
    setShouldFetch(true); // 关闭时仅修改触发标记，不直接调用接口
};

// 新增useEffect，标记为true且filters更新完成后才发请求
useEffect(() => {
  if (shouldFetch) {
    fetchData();
    setShouldFetch(false); // 请求发出后重置标记
  }
}, [filters, shouldFetch]);

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