[解決済み] React Hooksのエラー。フックは関数コンポーネントの内部でのみ呼び出すことができます。

質問

を使用すると、このエラーが発生します。 useState フックを使用すると、このエラーが発生します。私はこれを基本的な形にしています。 react ドキュメント を参考にしながら、基本的な形にしているのですが、まだこのエラーが出ています。顔面蒼白になる覚悟はできているのですが...。

export function Header() {
  const [count, setCount] = useState(0)
  return <span>header</span>
}

どのように解決するのですか？

更新されました。2018年12月

新バージョンの react-hot-loader がリリースされました。 リンク . Hooksがいきなり動作するようになりました。作者であるtheKasheyさんに感謝します。

このボイラープレートを見てください https://github.com/ReeganExE/react-hooks-boilerplate

• React フック
• React ホットローダー
• Webpack、Babel、ESLint Airbnb。

前回の回答

まず、インストールされていることを確認します。 react@next と react-dom@next .

それから、あなたが react-hot-loader を使用しているかどうかを確認します。

私の場合、ホットローダーとHMRを無効にすると、動作するようになりました。

参照 https://github.com/gaearon/react-hot-loader/issues/1088 .

引用されました。

はい。RHLは100％フックと互換性がありません。いくつかの理由があります。 の理由があります。

SFC はクラス コンポーネントに変換されます。理由としては SFC に "update" メソッドがない限り、HMR で forceUpdate することができるためです。 SFCに "update"メソッドがない限り。私は、強制更新の他の方法を探しています（このような。そこで RHLはSFCを殺している。

"hotReplacementRender"です。RHL は React の仕事をしようとしていて、古いアプリと新しいアプリをレンダリングして、それらを統合します。 をレンダリングして、古いアプリと新しいアプリをマージしようとしています。そのため、明らかに、これは壊れています。 現在は壊れています。

私は、両方の問題を軽減するために PR を起草するつもりです。それはうまくいくでしょうが 今日ではない。

より適切な修正方法があり、それは動作するでしょう - 。 コールドAPI

任意のカスタムタイプに対してRHLを無効にすることができます。

import { cold } from 'react-hot-loader';

cold(MyComponent);

検索対象 "useState/useEffect" を検索し、それを冷やしてください。

更新しました。

による 更新 を使うことができます。 react-hot-loader@next で、以下のように設定します。

import { setConfig } from 'react-hot-loader';

setConfig({
  // set this flag to support SFC if patch is not landed
  pureSFC: true
});

更新してくれた @loganfromlogan に感謝します。