インポートされたコンポーネントがインポートされていても定義されていないというエラー

Question

私は非常に奇妙な問題に直面しており、解決策を見つけることができません。 私はこのようなコンポーネントをレンダリングしています：

const Trans =() =>(
<div> 
.... 
</div>) 
export default Trans 

それから私import it as import Trans from './trans' と私はconnect (mapStateToProps, mapDispatchToProps)(Trans)使うとエラー が表示されていることYou must pass a component to the function returned by connect. Instead received undefined

Answer 1

これはおそらく循環依存関係が原因です。

最も単純な例ではsomethingElseがmoduleOne.jsに宣言されている場合、それはmoduleTwo.jsに用somethingを探して行く

// moduleOne.js 

import {something} from './moduleTwo'; 

export const somethingElse = something; 

// moduleTwo.js 

import {somethingElse} from './moduleOne'; 

export const something = somethingElse; 

です。

しかし、moduleTwoは、somethingElseからmoduleOne.jsを最初に宣言する必要があります。 somethingElseはmoduleTwoを待っているmoduleOneにあるため、まだ宣言されていません。したがって、undefinedです。

あなたの設定はおそらくこれよりもやりがいが少なく複雑ですが、同じ問題になります。

circular-dependency-pluginを使用してこれらを検出して修正します。

Answer 2

それは成分（または、それはコンポーネントのように見えます）ですが、 reactも忘れずにインポートしてください。

import React from 'react' 

const Trans =() => 
    <div> 
    ... 
    </div> 

export default Trans 

Answer 3

接続メソッドを使用している場合は、 "react-redux"パッケージを使用する必要があります。インポートしたかどうかを確認してください。