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.上拥有了它如此处的建议https://github.com/facebook/react/issues/18147，我尝试了useEffect和useCallback的方法，但是它们似乎没有用，因为updateFilter希望有人称呼它

从父组件的功能体内更新子组件

0 个答案: