1

我有一个父组件，其中包含一些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. 正如这里建议的https://github.com/facebook/react/issues/18147，我已经尝试过这种方法，useEffect但useCallback它们似乎没有像updateFilter期望一些参数来调用它。

4

0 回答 0