Question

我有一个与此非常相似的问题-How do I fix missing dependency in React Hook useEffect。

有一个主要区别-我正在将抓取函数传递给要从useEffect调用的子组件，所以我不能简单地将函数移到效果主体中。每次渲染都会重新创建fetch函数，并导致无限循环。我还有其他本地组件状态要触发效果。

我基本上有一个容器组件和一个演示组件。 MyPage是MyGrid的父级，并设置所有redux状态：

const MyPage = () => {

  const dispatch = useDispatch();
  const items= useSelector(selectors.getItems);
  const fetching = useSelector(selectors.getFetching);
  const fetchItems = opts => dispatch(actions.fetchItems(opts));

  return (
    <>
      {fetching && <div>Loading...</div>}
      <h1>Items</h1>
      <MyGrid
        items={items}
        fetchItems={fetchItems}
        fetching={fetching}
      />
    </>
  );

}

const MyGrid = ({ fetchItems, items, fetching }) => {

  const [skip, setSkip] = useState(0);
  const take = 100;
  const [sorts, setSorts] = useState([]);

  // when query opts change, get data
  useEffect(() => {

    const options = { skip, take };
    const sortString = getSortString(sorts);
    if (sortString) options['sort'] = sortString;
    fetchItems(options);

  }, [fetchItems, skip, sorts]);

在“ MyGrid”中，“ skip”和“ sorts”可以更改，并且应使效果触发。

“ fetchItems”每次都会重新创建，并导致无限循环。这个是我的问题。

现在，eslint react-hooks / exhaustive-deps规则使我将fetchItems放在依赖项列表中。我有更漂亮的设置可以在保存时自动修复，这会使情况更糟。

我知道Container / Presentational模式在使用钩子时过时了，但是它对我的情况很有用-我可能允许动态地将MyGrid换成MyList，并且不想在每个子组件中重复所有的redux东西。

我曾尝试useCallback和useMemo，但是eslint只是让我将所有相同的依赖项放入了它的依赖项数组参数中。

除了禁用eslint规则外，还有其他方法吗

// eslint-disable-next-line react-hooks/exhaustive-deps

要完成这项工作吗？

Answer 1

有两种方法可以使它起作用。

首先，将useCallback用于fetchItem之类的

const fetchItems = useCallback(opts => dispatch(actions.fetchItems(opts)), [dispatch, actions]);

其次直接在子组件中使用dispatch

const dispatch = useDispatch();
 useEffect(() => {

    const options = { skip, take };
    const sortString = getSortString(sorts);
    if (sortString) options['sort'] = sortString;
    dispatch(actions.fetchItems(options));

  }, [dispatch, actions, skip, sorts]);

useEffect道具回调函数导致无限循环

1 个答案: