web-dev-qa-db-ja.com

Reactフックエラー：フックは関数コンポーネントの本体内でのみ呼び出すことができます

useStateフックを使用すると、このエラーが発生します。私は基本的な形でこれを持っています、参照のために react docs を見て、まだこのエラーが発生しています。私は顔のPalmの瞬間の準備ができています...

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

更新日：2018年12月

react-hot-loaderの新しいバージョンがリリースされました link 。フックは、すぐに使用できるようになりました。著者のtheKasheyに感謝します。

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

  • 反応フック
  • React Hot Loader
  • Webpack、Babel、ESLint Airbnb

前の回答：

まず、react@nextとreact-dom@nextをインストールしたことを確認してください。

次に、react-hot-loaderを使用しているかどうかを確認します。

私の場合、ホットローダーを無効にすると、HMRが機能します。

https://github.com/gaearon/react-hot-loader/issues/1088 を参照してください。

引用：

はい。 RHLはフックと完全に互換性がありません。その背景にはいくつかの理由があります。

SFCはクラスコンポーネントに変換されています。理由があります-SFCに「更新」メソッドがない限り、HMRでforceUpdateを実行できます。更新を強制する別の方法を探しています（このように。RHLはSFCを殺しています。

「hotReplacementRender」。 RHLは、Reactのジョブを実行し、古いアプリと新しいアプリをレンダリングして、それらをマージしようとしています。それで、明らかに、それは今壊れています。

両方の問題を軽減するために、PRを起草する予定です。動作しますが、今日は動作しません。

より適切な修正があり、動作します- コールドAPI

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

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

cold(MyComponent);

コンポーネントのソースコード内で"useState/useEffect"を検索し、「コールド」します。

更新しました：

更新 react-hot-loaderメンテナーによると、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に感謝します。

37
Ninh Pham

私の問題は、react-domモジュールの更新を忘れていました。 問題を参照 。

25
JLarky

コンポーネントファイルにReactのプリミティブフックをインポートし、カスタムフックに渡すことで、これを解決できました。何らかの理由で、カスタムフックファイルにReactフック（useStateなど）をインポートしたときにのみエラーが発生します。

コンポーネントファイルにuseStateをインポートしています。

import React, {useState} from 'react'; // import useState

import {useCustomHook} from '../hooks/custom-hook'; // import custom hook

const initialState = {items: []};
export default function MyComponent(props) {
    const [state, actions] = useCustomHook(initialState, {useState});
    ...
}

それから私のフックファイルで：

// do not import useState here

export function useCustomHook(initialValue, {useState}) {
    const [state, setState] = useState(initialValue || {items: []});

    const actions = {
        add: (item) => setState(currentState => {
            const newItems = currentState.items.concat([item]);
            return {
                ...currentState,
                items: newItems,
            };
        }),
    };

    return [state, actions];
}

プリミティブフックを提供するためにReactのライブラリをモックする必要がないため、この方法によりフックのテスト容易性が向上しました。代わりに、モックuseStateフックをカスタムフックの関数に直接渡すことができます。これにより、カスタムフックがReactライブラリと結合されなくなり、より自然な関数型プログラミングとテストが可能になるため、コードの品質が向上すると思います。

3
mickmister

ParcelのHot Module Replacement を使用中にこのエラーが発生し、react-domをアルファバージョンに更新することで修正しました。

yarn add [email protected]

この問題を参照してください。

3
erica mitchell

パッケージ docz が[email protected]を使用し、最終出力バンドルに2つの反応バージョンがあったmonorepoで問題が発生しました。

Githubの問題

パッケージを削除して修正しました????

2
rista404

MobXを使用してコンポーネントをobserverでラップするときにこの問題に遭遇した場合は、mobx-react-liteの代わりにmobx-reactを使用してください。

2
Marcelo Cardoso

同じ問題がありました。私の問題はReactルーターに関連していました。誤って使用していた

<Route render={ComponentUsingHooks} />

の代わりに

<Route component={ComponentUsingHooks} />
2
peternyc

私にとっての問題は確かに react-hot-loader でした。

次のようなcoldメソッドを使用して、アプリ全体ではなく、単一のコンポーネントのreact-hot-loaderを無効にすることができます：

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

export const YourComponent = cold(() => {

  // ... hook code

  return (
    // ...
  )
})

OR

export default cold(YourComponent)
2
protoEvangelion

react-hot-loaderのこの回避策が見つかりましたが、修正するためのPRはインバウンドです。

フックを呼び出す関数をReact.memoでラップし、変更されていない場合はホットリロードを防ぎます。

const MyFunc = React.memo(({props}) => {...

ソリューションの功績： https://github.com/gatsbyjs/gatsby/issues/9489

1
Chance Eakin

Create React Appを使用している場合は、reactおよびreact-domバージョンでも"react-scripts"バージョンを更新する必要があります。

 "react-scripts": "2.1.5",
 "react": "^16.8.1",
 "react-dom": "^16.8.1",

この組み合わせは正常に機能します。

0
kartikag01

私の問題は次のとおりです。

私がやっていた：ReactDOM.render(Example(), app);

私がやるべきだったのに対し、ReactDOM.render(<Example />, app);

0
nwparker

私にとって、これは、react（16.8.6）の新しいバージョンとreact-dom（16.6.1）の古いバージョンがあったために発生していました。

https://reactjs.org/warnings/invalid-hook-call-warning.html#mismatching-versions-of-react-and-react-dom

両方を@latest（16.8.6）にアップグレードすると、エラーが修正されました。

0
Cody Moniz

重複バージョン of react（およびおそらくreact-dom）を含む@ rista404の答えを詳しく説明すると、フックを使用している場所に応じて同じエラーが発生します。以下に2つの例を示します...

  1. 外部依存関係には、reactに別のバージョンのdependenciesが含まれます。これは、おそらくreactが通常はピア依存関係であるため、誤っている可能性があります。 npmがこのバージョンをローカルバージョンと自動的に重複排除しない場合、このエラーが表示されることがあります。これが@ rista404が言及していたことです。
  2. npm linkreactをdevDependenciesまたはdependenciesに含むパッケージ。現在、このパッケージのモジュールでは、親プロジェクトではなくローカルnode_modulesディレクトリからreactの異なるバージョンをプルすると、エラーが表示される場合があります。

後者は、resolve.aliasを使用してwebpackとバンドルすると修正できます。

    resolve: {
        alias: {
            'react': path.resolve(__dirname, 'node_modules/react'),
            'react-dom': path.resolve(__dirname, 'node_modules/react-dom')
        }
    }

これにより、reactが常に親プロジェクトのnode_modulesディレクトリから取得されます。

0
Skip Jack