Redux表单不受应用程序管理，有奇怪的错误

Question

我正试图把手放在Redux表单模块，我有麻烦，我不明白为什么我有那种奇怪的错误。

我目前的问题是在一个名为"Login"的组件中显示一个搜索栏:

import React from ' React ';import SearchBar from './../../cmp/SearchBar/SearchBar ';

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

这是SearchBar组件:

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);

下面是我的根组件，由react-router管理:

// 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')
);

事实是，我不能看到我的组件在屏幕上，我只是有以下错误在我的浏览器控制台:

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

我可能错过了什么地方…我找不到。

你知道吗?

EDIT(部分解析):似乎在redux-form v6上。X(因为webpack 2)，有一个错误，我们必须做一些(奇怪的)东西，比如导出一个包含组件的对象:

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
};

And so:

<SearchBar.sb/>

没有错误，但是现在屏幕上什么也没有显示:(

编辑:问题是由于Redux表单6。x。我已经降级了，而且效果很好:D

Answer 1

我做了一点研究，我发现以下线程:

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

不确定你是否在使用webpack，但是:

要使它与webpack 2一起工作，当前的解决方法是导出一个对象，它引用表单组件，而不是表单本身组件本身。

我实际上一直使用下面的语法，它目前为止是有效的:

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

然后导出SearchBarForm