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

Question

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

这是我的父组件。

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>
  );
}

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

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 = ({applyFilters}) => {

  // same code as before

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


  return <OtherComponent />;
};

我猜这与 React 比较 props 的方式有关。
也许我应该记住所有道具。但我认为这不是一种模式

Answer 1

props 对象在每次父级重新渲染（和重新渲染 SideBarFilters）时都是不同的。

你不应该反对那个。尝试找到解决方法时，您可能运行会遇到日期过时的全新问题。

像你一样解构，这是处理挂钩中依赖关系的预期和建议方法。

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

Pass function via props cause useEffect infinite loop if I do not destructure props

reactjs

use-effect