web-dev-qa-db-ja.com

connectによって返される関数にコンポーネントを渡す必要があります。代わりに未定義を受信しました

以下のコードは、

不明なエラー：コンポーネントをconnectによって返された関数に渡す必要があります。代わりに未定義を受信しました

List.js

import React from 'react';
import { connect, bindActionCreators } from 'react-redux';
import PostList from '../components/PostList'; // Component I wish to wrap with actions and state
import postList from '../Actions/PostList' //Action Creator defined by me

const mapStateToProps = (state, ownProps) => {
    return state.postsList
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({"postsList":postList},dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)(PostList);

PostList.js

import React from 'react'

export const PostList = (props) => {
    return <div>List</div>
}

解決策を教えてください。

javascriptreactjsreduxreact-redux
16
Ram Kumar Parthiban

あなたがやっている import PostList from '../components/PostList';を使用する必要がありますexport defaultをPostList.jsファイルに追加します。

それ以外の場合は、import { PostList } from '../components/PostList';。

興味のある方には、es6のインポート/エクスポート構文に関する素晴らしい記事があります： http://www.2ality.com/2014/09/es6-modules-final.html

17
Canastro

特にaskerとは関係ありませんが、このエラーに直面している場合は、connect（）構文が正しいかどうかを確認する価値があります。

const PreloadConnect = connect(mapStateToProps, {})(Preload);

export default PreloadConnect;

PreloadがIIFEパラメーターとして渡されることに注意してください。

1
Lucas Bustamante

詳細は こちら をご覧ください。

次のように要約される3つの理由があります。

  • コンポーネント間の循環依存関係
  • exportとexport defaultの使用法が間違っているため、間違った方法でインポートされた
  • 接続関数を誤って使用し、間違ったパラメーターを渡した

私の場合、循環依存関係があり、 circular-dependency-plugin が修正に役立ちました。

0
spp