web-dev-qa-db-ja.com

React反応ライブラリのフックにより、無効なフック呼び出しエラーが発生します

https://www.npmjs.com/package/create-react-library を使用して反応ライブラリを作成し、他のReactプロジェクトで正常に使用しました。ただし、ライブラリ内でリアクションフック機能を使用しようとすると、次のエラーが発生します。

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
    1. You might have mismatching versions of React and the renderer (such as React DOM)
    2. You might be breaking the Rules of Hooks
    3. You might have more than one copy of React in the same app
.....

My Library私のコンポーネントで次のようにuseStateを使用しようとしました。

import React, { useState } from 'react'

const General = (props) => {

    const [count, setCount] = useState(0);
    return (
        <div>
           General component
        </div>
    )
}

export default General

使っています "react": "^16.8.6"および"react-dom": "^16.8.6"

My React APPを使用してアプリケーションを作成 https://github.com/facebook/create- react-app および上記のライブラリーを次のように使用します。

import Reactfrom 'react'
import { General } from 'my.lib'
const accountSummary = props => {

  return (
    <div>
      <General>
    </div>
  )
}

export default accountSummary

どちらも同じ反応バージョンがあり、ライブラリはpeerDependenciesと同じ反応-domと反応バージョンを使用しています

reactjsreact-router-domreact-hooks
8
Janith Widarshana

React create-react-libraryこのライブラリはGeneralコンポーネントです。ここでnpmに公開しました https://www.npmjs.com/package/stackoverflow-test およびa Reactここで使用するためのアプリ https://codesandbox.io/s/mm7yl83o28 。

General componentテキストとcountは増加します。

問題を再現できません。このテストを使用して実装を確認してください。

1
F.bernal

@Janithがmy-comp-lib:"file:../.."（テストするたびに公開する必要はありません）と同じ問題が発生しました。

無効なフック呼び出し。フックは、関数コンポーネントの本体の内部でのみ呼び出すことができます。これは、次のいずれかの理由で発生する可能性があります。

  1. Reactとレンダラー（React DOMなど）のバージョンが一致しない場合があります）
  2. あなたはフックのルールを破っているかもしれません
  3. 同じアプリにReactのコピーが複数ある場合があります。デバッグ方法のヒントについては、react-invalid-hook-callを参照してください。

この問題を修正

アプリとライブラリが同じ反応（パッケージ）の場所を指すようにすることで、これを修正できました。

Below are the steps I followed :
1. In Your Application:
a) cd node_modules/react && npm link
b) cd node_modules/react-dom && npm link

2. In Your Library
a) npm link react
b) npm link react-dom

3)Stop your dev-server and do `npm start` again.

できます！！

詳細については、以下のリンクを参照してください。

https://github.com/facebook/react/issues/14721

https://github.com/facebook/react/pull/1469

https://github.com/facebook/react/issues/13991

注：パッケージをアーティファクトに公開してインストールした場合、ピアの依存関係として反応と反応が発生し、配布には含まれないため、この問題は発生しません。したがって、パッケージとアプリケーションは、アプリケーションにインストールされているのと同じ反応を使用します。

10
Yugandhar Pathi

多分これは役に立つでしょう：

リンク-リアクションコンポーネントnpmパッケージの作成方法の例

1
Michał

リンクをアプリからライブラリに変更すると、reactとreact-domのリンクに加えて、「file：../」ではなく「link：../」になりました。

1
oligopol

同じ問題が発生しました。ライブラリと同じように、サンプルアプリで同じリアクションをポイントすることで修正できました。

アプリの構造

Root

  • 例
    • package.json
  • src（ライブラリ）
  • package.json

したがって、例> package.jsonから、reactを次のように変更しました：

    "react": "link:../node_modules/react",

これは上記のnpm linkによく似ていますが、npmをインストールするたびに消えることはありません。

0
busyPixels