reactjs - 親コンポーネントの関数本体内から子コンポーネントを更新する

Question

Filters次のような子としていくつかを含む親コンポーネントがあります。

type TProps = {
  filters: Array<IFilter | IDateFilter>;
  updateFilter: (field: string, selectedElements: Array<string>) => void;
  resetFilter: (field: string) => void;
  resetFilters: () => void;
};

const Filters: React.FC<TProps> = (props: TProps) => (
  <div className={styles.wrapper}>
    <FilterBar {...props} />
  </div>
);

Filters親コンポーネントの子:

<Filters
   filters={filters}
   updateFilter={updateFilter}
   resetFilters={resetFilters}
   resetFilter={resetFilter}
/>

filters親コンポーネントの状態:const [filters, setFilters] = useState<Array<IFilter | IDateFilter>>([]);

updateFilterメソッドはいくつかの引数を想定しており、以下のように親に記述されています。

const updateFilter = (field: string, selectedElements: Array<string>) => {
    setFilters(filters => {
      const updatedFilters = filters.map(filter => {
        if (filter.field === field) {
          return { ...filter, selectedElements: [...selectedElements] };
        }
        return filter;
      });
      return updatedFilters;
    });
  };

resetFilter&resetFiltersは、これと同様の構造を持っています。それらがトリガーされると、親のfilters変更のように効果が発生します。

useEffect(() => {
    fetchStuff();
  }, [filters]);

彼らは働いているように見えますが、私はコンソールにWarning: Cannot update a component from inside the function body of a different component. これを持っていますで呼び出されるいくつかの引数が必要です。useEffectuseCallbackupdateFilter