Uncaught TypeError：this.props.xxxは、Reactの関数ではありません。

Question

私はReact.jsをプロジェクトに使用していますが、いくつか問題が発生しています。ここに私の問題は、次のとおりです。

私は新しいレシピを作成するためのものです。このコンポーネントを持っている：

import React, {Component, PropTypes} from 'react'; 
import { reduxForm } from 'redux-form'; 
import {Link} from 'react-router'; 
import { createRecipe } from '../actions/index'; 

class NewRecipe extends Component { 
    static contextTypes = { 
     router:PropTypes.object 
    }; 

    onSubmit(props){ 
      this.props.createRecipe(props).then(() => { 
      this.context.router.push('/yourRecipes'); 
     }); 
    } 

    render(){ 
     const name = this.props.fields.name; 
     const description = this.props.fields.description; 
     const handleSubmit = this.props.handleSubmit; 
     return(
      <form onSubmit={handleSubmit(this.onSubmit.bind(this))}> 
       <h3>New recipe</h3> 
       <div> 
        <label>Name</label> 
        <input type="text" className="form-control" {...name} /> 
       </div> 
       <div> 
        <label>Description</label> 
        <input type="text" className="form-control" {...description} /> 
       </div> 
       <button type="submit" className="btn btn-primary btn-primary-spacing">Submit</button> 
       <Link to="/yourRecipes" className="btn btn-danger btn-primary-spacing">Cancel</Link> 
      </form> 
     ); 
    } 
} 

export default reduxForm({ 
    form: 'NewRecipeForm', 
    fields: ['name','description'] 
}, null, { createRecipe })(NewRecipe); 

createRecipeアクションの作成者は、この内部のindex.jsファイルのようになります。

export function createRecipe(props){ 
    const request = axios.post('http://localhost:3001/recipes/new', props); 
    return { 
     type: CREATE_RECIPE, 
     payload: request 
    }; 
} 

毎回フォームの送信ボタンをクリックしようとしました。ブラウザのコンソールでこのエラーが表示されます。

Uncaught TypeError: this.props.createRecipe is not a function 

Answer 1

この反応クラスにこのような関数が定義されておらず、this.props.createRecipeを使用してこのクラスにアクセスしようとしているため、エラーが発生します。 インポートを持っているときと同じ方法で、createRecipe（）を直接呼び出す方法もあります。 もう1つの方法は、react-reduxからconnectを使用して、このクラスをstateおよびdispatchのプロップと接続し、次にthis.props.createRecipe（）を使用することです。

Answer 2

redux-form 6.xxを使用している場合connectを使用する必要があります

NewRecipe = reduxForm({ 
    form: 'NewRecipeForm', 
    fields: ['name','description'] 
}, null)(NewRecipe); 

export default(null, createRecipe)(NewRecipe);