Question

我试图将手放在Redux Form模块上，我遇到了麻烦，我无法理解为什么会出现这种奇怪的错误。

我目前的问题是在名为“Login”的组件中显示SearchBar：

从'react'导入React; 从'./../../ cmp / searchBar / 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

我可能在某处遗漏了某些东西......我找不到。

有什么想法吗？

编辑（部分解决）：似乎在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
};

所以：

<SearchBar.sb/>

没有错误，但屏幕上暂时没有显示任何错误:(

编辑：问题是因为Redux形式6.x。我降级了，它就像一个魅力：D

Answer 1

我做了一些研究，发现了以下主题：

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

不确定您是否使用webpack，但是：

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

我实际上总是使用以下语法，它到目前为止起作用：

n = some-largish-value

for i in itertools.product([0, 1], repeat=n):
   result = do_something_with(list(i))

然后导出const SearchBarForm = reduxForm({ form: 'searchBar' })(SearchBar);

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

1 个答案: