web-dev-qa-db-ja.com

USEEffect Propsコールバック関数は無限ループを引き起こします

私はこれと非常に似た問題があります - React Hook UseEffect の欠けている依存関係を解決するにはどうすればよいですか。

鍵の違いが1つあります - 私は 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/Entrutive-Depsルールは、依存関係リストにFetchItemsを置くことです。私はそれが悪化するようにするために、保存時にAutoFixへの不適切なセットアップを持っています。

私はコンテナ/プレゼンテーションパターンがフックでスタイル外であることを知っていますが、それは私の状況に良い機能です - 私はMyListのMyList for MyListを動的に交換することを可能にし、各子コンポーネントのすべてのREDUXスタッフを繰り返したくないかもしれません。

私は USECALLBACK と usememo を試してみましたが、Eslintは私をすべて置くだけです依存関係配列パラメータの同じ依存関係があります。

ESLINTルールを無効にする以外の方法はありますか

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

この仕事をするために？

reactjsreact-reduxeslintcreate-react-appreact-hooks
7
user210757

2つの方法があります、あなたはそれを仕事をすることができます。

最初に、fetchItemのようなuseCallbackを使って

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]);
 _
2
Shubham Khatri