React中如何确保所有过滤器完成注册？

方案1：明确预期过滤器总数 #

在ListContext里新增一个状态expectedFilterCount，对外暴露setExpectedFilterCount方法。开发者先调用这个方法设置要注册的过滤器总数，之后在监听filters的effect里，判断当前filters的长度是否等于预期总数，相等时再执行目标方法。

修改后的Context核心代码：

const ListContext = createContext();

export function ListProvider({ children }) {
  const [filters, setFilters] = useState([]);
  const [expectedFilterCount, setExpectedFilterCount] = useState(0);

  const registerFilter = (filter) => {
    setFilters(prev => [...prev, filter]);
  };

  return (
    <ListContext.Provider value={{
      filters,
      registerFilter,
      setExpectedFilterCount
    }}>
      {children}
    </ListContext.Provider>
  );
}

使用时的代码：

// 开发者先设置预期数量
const { setExpectedFilterCount, registerFilter } = useContext(ListContext);
useEffect(() => {
  setExpectedFilterCount(3); // title、name、age三个过滤器
  registerFilter(titleFilter);
  registerFilter(nameFilter);
  registerFilter(ageFilter);
}, []);

// 你的监听逻辑
const { filters, expectedFilterCount } = useContext(ListContext);
useEffect(() => {
  if (filters.length === expectedFilterCount && expectedFilterCount > 0) {
    someMethodToBeRunOnlyWhenAllFiltersAreAdded();
  }
}, [filters, expectedFilterCount]);

方案2：支持批量注册过滤器 #

修改registerFilter方法，让它既支持单个过滤器，也支持传入过滤器数组。这样开发者可以一次性传入所有要注册的过滤器，setFilters只会执行一次，effect也就只会触发一次。

修改后的registerFilter：

const registerFilter = (filterOrFilters) => {
  setFilters(prev => {
    if (Array.isArray(filterOrFilters)) {
      return [...prev, ...filterOrFilters];
    }
    return [...prev, filterOrFilters];
  });
};

开发者使用时：

registerFilter([titleFilter, nameFilter, ageFilter]);

你的effect就可以直接执行（因为只会触发一次更新）：

useEffect(() => {
  if (filters.length > 0) { // 可根据实际需求调整判断条件
    someMethodToBeRunOnlyWhenAllFiltersAreAdded();
  }
}, [filters]);

方案3：用注册完成标记（灵活适配场景） #

如果是同步注册场景，可以在Context里新增一个filtersRegistered状态，对外暴露markFiltersRegistered方法。开发者注册完所有过滤器后手动调用这个方法标记完成，你的effect监听这个状态变化即可执行目标方法。

修改后的Context核心代码：

const ListContext = createContext();

export function ListProvider({ children }) {
  const [filters, setFilters] = useState([]);
  const [filtersRegistered, setFiltersRegistered] = useState(false);

  const registerFilter = (filter) => {
    setFilters(prev => [...prev, filter]);
  };

  const markFiltersRegistered = () => {
    setFiltersRegistered(true);
  };

  return (
    <ListContext.Provider value={{
      filters,
      registerFilter,
      markFiltersRegistered
    }}>
      {children}
    </ListContext.Provider>
  );
}

使用时的代码：

// 开发者注册完后标记完成
const { registerFilter, markFiltersRegistered } = useContext(ListContext);
useEffect(() => {
  registerFilter(titleFilter);
  registerFilter(nameFilter);
  registerFilter(ageFilter);
  markFiltersRegistered();
}, []);

// 你的监听逻辑
const { filtersRegistered } = useContext(ListContext);
useEffect(() => {
  if (filtersRegistered) {
    someMethodToBeRunOnlyWhenAllFiltersAreAdded();
  }
}, [filtersRegistered]);

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