無効なフック呼び出し: React コンポーネント構築の競合を解決する

フックが外部で呼び出されると、React で「無効なフック呼び出し」エラーが発生する関数コンポーネントのスコープ。この問題はさまざまな理由で発生する可能性があります。

潜在的な原因の 1 つは、React のバージョンとそのレンダラー (React DOM など) の不一致です。これを修正するには、互換性のあるバージョンを使用していることを確認してください。

もう 1 つの可能性は、フックは関数コンポーネントの本体内でのみ使用できると規定するフックの規則に違反していることです。 React コードの予測可能性と一貫性を維持するには、このルールに従うことが重要です。

最後に、同じアプリケーション内に React の複数のインスタンスがあると、フック呼び出しの競合が発生する可能性があります。この場合、正しいソースから React をインポートしていることを確認し、複数のコピーをロードしないようにしてください。

提供されたコード例の場合、マテリアル UI の makestyles フックを使用しようとしたときにエラーが発生しました。 (const useStyles = makeStyles(theme => ({ ... })) として注釈が付けられています) 関数コンポーネントの外にあります。これを解決するには、許容コンポーネントを関数コンポーネントとしてリファクタリングする必要があります。

あるいは、次のような場合もあります。 npm リンクを使用してローカル ライブラリをインストールする開発中にこのエラーが発生した場合、指定された回答で概説されている解決策が効果的であることがわかり、アプリケーション内の React インスタンスとライブラリ内のインスタンスの間にリンクを確立することで、バージョンの競合を排除し、正常に使用できます。ローカル ライブラリ内のフック。