Uncaught TypeError: this.props.xxx ist keine Funktion in React

Question

Ich benutze React.js für ein Projekt und ich bekomme einige Probleme. Hier ist mein Problem:

Ich habe diese Komponente, die für die Erstellung einer neuen Rezeptur ist:

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 Aktion Schöpfer wie diese innerhalb index.js Datei aussieht:

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

Jedesmal Ich versuche, auf die Senden-Schaltfläche des Formulars zu klicken Ich erhalte diesen Fehler in der Browser-Konsole:

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

Answer 1

Der Fehler liegt darin, dass in dieser Reaktionsklasse keine solche Funktion definiert ist und Sie versuchen, mit this.props.createRecipe darauf zuzugreifen. Eine Möglichkeit ist, dass Sie direkt als createRecipe() aufrufen, wie Sie den Import haben. Eine weitere Möglichkeit ist, dass Sie von reagieren-redux verwenden verbinden und diese Klasse mit dem Staat und den Versand Requisiten verbinden und dann können Sie verwenden this.props.createRecipe()

Answer 2

Wenn Sie redux-Formular 6.xx verwenden Sie dann muss connect verwenden

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

export default(null, createRecipe)(NewRecipe);