レンダリング（）

Question

私は次のエラー

警告取得シンプルReduxのフォームを作成しようとしている：React.createElement：タイプはすべきではないヌル、未定義、ブール値を、または番号。これは文字列（DOM要素の場合）またはReactClass（複合コンポーネントの場合）でなければなりません。レンダリング方法がSearchProductsFormであることを確認してください。

これは私のフォームコンポーネントです。標準コンポーネントのみを使用しており、インポートステートメントはSimpleFormのサンプルからコピーされています。私は、次の行を削除した場合

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"/> 

をレンダリングこれは私がReduxのフォーム3.0、私は6に更新したときにそれが動作を使用していた私の呼び出し側コンポーネント

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

です期待通りに