React: メモ化されたコンポーネントがフックとサスペンスの両方を使用する場合の警告

作成日 2019年02月07日 · 4コメント · ソース: facebook/react

機能をリクエストしバグを報告しますか？

バグ

現在の動作は何ですか？

次のすべての条件が満たされたコンポーネントについて、コンソールに警告が表示されます。

React.memoを使用してメモ化されます
フックを使用します
それはサスペンスを使用します（約束が投げられます）。

その警告のテキスト： Warning: ComponentName: Rendered more hooks than during the previous render. This is not currently supported and may lead to unexpected behavior.

現在の動作がバグである場合は、再現する手順と、可能であれば問題の最小限のデモを提供してください。 以下のJSFiddle（https://jsfiddle.net/Luktwrdm/）またはCodeSandbox（https://codesandbox.io/s/new）の例へのリンクを貼り付けます。

https://codesandbox.io/s/71lr16j491

期待される動作は何ですか？

フックのルールが満たされているため、警告は表示されません。また、 React.memoが使用されているかどうかに関係なく、動作は一貫している必要があります。

Reactのどのバージョン、およびどのブラウザ/ OSがこの問題の影響を受けますか？

React 16.8.1

Hooks Bug

ソース

trojanowski

👍3

最も参考になるコメント

16.8.2で修正されました。
https://codesandbox.io/s/vmmkmvo6pl

gaearon 2019年02月14日

👍2

全てのコメント4件

私が最初に読んだのは、これはバグです。

gaearon 2019年02月08日

バージョン16.8.1これとまったく同じ問題に気づきました。ただし、私の場合、 Promiseがスローされる場所とSuspenseコンポーネントの間にメモ化されたコンポーネントはありません。

Promiseがスローされて警告が表示される前に、コンポーネントは上部に2つのフックを宣言します。フックと同じことが起こる前に、 Promiseを上に投げてコールを移動しました。コンポーネント内にPromiseスローされていない場合、警告は消えます。

私のコンポーネントのモックは次のようなものです。

function Component(props) {
  const [state, setState] = useState()
  useEffect(...)

  // Promise is thrown somewhere after these two
  // hooks on top, but before the return statement.
  return (
    ...
  )
}

muqg 2019年02月09日

これを確認できます。

ex3ndr 2019年02月12日

16.8.2で修正されました。
https://codesandbox.io/s/vmmkmvo6pl

gaearon 2019年02月14日

👍2

このページは役に立ちましたか？

0 / 5 - 0 評価

React: メモ化されたコンポーネントがフックとサスペンスの両方を使用する場合の警告

最も参考になるコメント

全てのコメント4件

関連する問題