2016-10-04 3 views
0

私はReduxフォームモジュールを手に入れようとしていますが、私はトラブルがあり、なぜこのような奇妙なエラーがあるのか​​理解できません。アプリケーションによって管理されていない、奇妙なエラーのあるReduxフォーム

私の現在の問題は、「ログイン」と呼ばれるコンポーネントに検索バーを表示するには、次のとおりです。

インポートは「反応」からリアクト。 './../../cmp/searchBar/searchBar'から検索バーをインポートします。

// some other stuff here... 
import {createStore, combineReducers} from 'redux'; 
import {reducer as formReducer} from 'redux-form'; 
const reducers = { 
    form: formReducer 
}; 
const reducer = combineReducers(reducers); 
const store = createStore(reducer, window.devToolsExtension && window.devToolsExtension()); 

ReactDOM.render(
    <Provider store={store}> 
    <Router history={browserHistory}> 
     <Route path="/" component={Home}> 
     <Route path="login" component={Login}/> 
     </Route> 
    </Router> 
    </Provider>, 
    document.getElementById('root') 
); 

事実が、私は上の私のコンポーネントを見ることができないということです。私のルートコンポーネントが反応し、ルータによって管理されていますここで

import React from 'react'; 
import {Field, reduxForm} from 'redux-form'; 
/** 
* The seach bar component class definition 
*/ 
class SearchBar extends React.Component { 
    /** 
    * Render the searchBar component 
    */ 
    render() { 
    return (
     <form> 
     <Field name="inputField" component="input" type="text"/> 
     <button type="submit">Rechercher</button> 
     </form> 
    ); 
    } 
} 

/** 
* Decorate the form 
*/ 
export default reduxForm({ 
    form: 'searchBar' 
})(SearchBar); 

そして:

export default class Login extends React.Component { 
    render() { 
    return (
     <div> 
     <SearchBar/> 
     </div> 
    ); 
    } 
} 

そしてここでは、検索バーコンポーネントです画面と私は単に私のブラウザのコンソールに次のエラーがあります。

reduxForm.js:645 Uncaught TypeError: Cannot read property 'wrapped' of undefined 

どこかでおそらく何かが見つからないのですが...どこに見つけられないのですか?

コンポーネントを含むオブジェクトをエクスポートするようなことが(理由のWebPACK 2の)Reduxの形式v6.xの上、誤りがあることをようで、私たちは何か(奇妙な)を行う必要があります。:

EDIT(部分的に解決さ)

import React from 'react'; 
import {Field, reduxForm} from 'redux-form'; 
/** 
* The seach bar component class definition 
*/ 
class SearchBar extends React.Component { 
    /** 
    * Render the searchBar component 
    */ 
    render() { 
    return (
     <form> 
     <Field name="inputField" component="input" type="text"/> 
     <button type="submit">Rechercher</button> 
     </form> 
    ); 
    } 
} 

const sb = reduxForm({ 
    form: 'searchBar' 
})(SearchBar); 

export default { 
    sb 
}; 

そしてそう:

<SearchBar.sb/> 

エラーなし、今:(

EDIT画面に何も表示:T彼の問題はRedux形式6.xのためでした。私はダウングレードのだが、魔法のように動作:D私は研究を少しやった

答えて

1

と私は次のスレッドが見つかりました:

https://github.com/erikras/redux-form/issues/1010

あなたはWebPACKのを使用している場合は必ず、しかしない:

webpack 2で動作させるには、 コンポーネントの代わりに フォームコンポーネントへの参照を持つオブジェクトをエクスポートするのが現状です。

私は実際には常に次の構文を使用して、それは今のところ動作します:

const SearchBarForm = reduxForm({ 
    form: 'searchBar' 
})(SearchBar); 

、その後、私は除いて、これは私が検索バーコンポーネントのデコレータの一部でやっmは何だと思いますSearchBarForm

+0

をエクスポート私は中間変数を使用していません。しかし、提案に感謝:) – mfrachet

関連する問題