Question

尝试创建简单的redux-form时，我收到以下错误

警告：React.createElement：type不应为null，undefined，boolean或number。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合组件）。检查SearchProductsForm的呈现方法。

这是我的表单组件，我只使用标准组件，并且从SimpleForm示例复制了import语句。

import React, { Component, PropTypes } from 'react';
import { Field, reduxForm } from 'redux-form';
const { DOM: { input } } = React;

@reduxForm({
  form: 'searchProducts',
  fields: ['name']
})
export default
class SearchProductsForm extends Component {

  static propTypes = {
    name: PropTypes.string,
    handleSubmit: PropTypes.func.isRequired
  };

  render() {
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit}>
          <div>
            <label htmlFor="name">Name</label>
              <Field name="name" component={input} type="text" placeholder="Last Name"/>
          </div>
          <button type="submit">Submit</button>
      </form>
    );
  }
}

如果删除以下行，则组件呈现

<Field name="name" component={input} type="text" placeholder="Name"/>

这是我的调用组件

import React, {Component, PropTypes} from 'react';
import Helmet from 'react-helmet';
import {connect} from 'react-redux';
import * as productActions from 'redux/modules/products';
import {isLoaded, load as loadProducts} from 'redux/modules/products';
import { asyncConnect } from 'redux-async-connect';
import { SearchProductsForm } from 'components';

@asyncConnect([{
  deferred: true,
  promise: ({store: {dispatch, getState}}) => {
    if (!isLoaded(getState())) {
      return dispatch(loadProducts());
    }
  }
}])

@connect(
  state => ({
    products: state.products.data,
    error: state.products.error,
    loading: state.products.loading,
    value: ''
  }),
  {...productActions })

export default class Products extends Component {
  static propTypes = {
    products: PropTypes.array,
    error: PropTypes.string,
    loading: PropTypes.bool,
    load: PropTypes.func.isRequired,


  };

  handleSubmit = ( values ) => {
    console.log( values );
  }

  render() {
    const {products} = this.props;
    return (
      <div>
        <Helmet title="Products"/>
          <SearchProductsForm onSubmit={this.handleSubmit} />
            {products.map((product) =>
              <tr key={product._id}>
                <td>{product._id}</td>
                <td>{product._source.title}</td>
              </tr>)
            }
          }
      </div>
    );
  }
}

Answer 1

我使用的是redux-form 3.0，当我更新到6时，它按预期工作

当使用来自react-form的

1 个答案: