Reactjs 如果我不解构道具，通过道具传递函数会导致useEffect无限循环

我有一个状态为的父组件。我想传递一个处理程序来设置子组件的一些状态

function ParentComponent() {
  const [filters, setFilters] = useState({});

  const setFiltersHandler = useCallback(filtersObj => {
    setFilters(filtersObj);
  }, []);

  useEffect(() => {
    // Do something and pass this to <Content /> component 
  }, [filters]);

  return (
    <div>
          <Content filters={filters}>
          <SideBarFilters applyFilters={setFiltersHandler} />
    </div>
  );
}

这是我的父组件

function ParentComponent() {
  const [filters, setFilters] = useState({});

  const setFiltersHandler = useCallback(filtersObj => {
    setFilters(filtersObj);
  }, []);

  useEffect(() => {
    // Do something and pass this to <Content /> component 
  }, [filters]);

  return (
    <div>
          <Content filters={filters}>
          <SideBarFilters applyFilters={setFiltersHandler} />
    </div>
  );
}

函数ParentComponent（）{
const[filters，setFilters]=useState（{}）；
常量setFilterHandler=useCallback（filtersObj=>{
设置过滤器（过滤器OBJ）；
}, []);
useffect（（）=>{
//执行某些操作并将其传递给组件
}，[过滤器]；
返回(
);
}

这是我的子组件。这会导致无限循环

const SideBarFilters = props => {

  const [filterForm, setFilterForm] = useState({
    specialities: {value: "all"}
  });

  // Some code with a input select and the handler to set filterForm

  useEffect(() => {
    let filterObj = {};
    for (let key in orderForm) {
      filterObj = updateObject(filterObj, {
        [key]: orderForm[key]["value"]
      });
    }
    props.applyFilters(filterObj);
  }, [props, orderForm]);


  return <OtherComponent />;
};

const SideBarFilters=props=>{
常量[FiltPerform，SetFiltPerform]=useState({
特性：{value:“all”}
});
//一些代码带有一个输入select和设置FILTEXFORM的处理程序
useffect（（）=>{
设filterObj={}；
for（在订单中输入）{
filterObj=更新对象（filterObj{
[键]：订单[键][“值”]
});
}
道具。applyFilters（filterObj）；
}，[道具，订单]；
返回；
};

但如果我分解道具，它不会循环。像这样

const SideBarFilters = ({applyFilters}) => {

  // same code as before

  useEffect(() => {
     // same as before
     applyFilters(filterObj);
  }, [applyFilters, orderForm]);


  return <OtherComponent />;
};

constsidebarfilters=（{applyFilters}）=>{
//和以前一样的代码
useffect（（）=>{
//和以前一样
应用过滤器（过滤器BJ）；
}，[ApplyFilter，订单]；
返回；
};

我的猜测是，这与如何比较道具有关。

---

也许我应该记下所有的道具。但我认为这不是一种模式，每次父对象重新渲染（以及重新渲染

侧栏过滤器

）时，props对象的引用都是不同的

你不应该反抗。试图找到解决方法时，您可能会遇到日期陈旧的全新问题

---

正如您所做的，它是处理钩子中依赖项的预期和建议方法。

props

对象在每次父对象重新呈现（以及重新呈现

SideBarFilters

）时的引用不同

你不应该反抗。试图找到解决方法时，您可能会遇到日期陈旧的全新问题

正如您所做的，它是处理钩子中依赖关系的预期和建议方法