Блог

У меня возникла проблема с определением того, где исправить эту проблему. Короче говоря, я собрал действие / функцию выборки «post» для отправки данных формы в мой серверный сервер. После внесения нескольких исправлений в синтаксис я продолжаю получать эту ошибку «TypeError: this.props.postRecipes не является функцией». Кстати, я использую Redux с react.

Вот на что это указывает:

 componentDidMount(){
        
        this.props.postRecipes()
        
    }

 

Мне пришлось импортировать данные из моего каталога действий, который я создал в своем дереве файлов, где я создал свою функцию postRecipe().

 export const postRecipes=()=>{
    const BASE_URL = `http://localhost:10524`
    const RECIPES_URL =`${BASE_URL}/recipes`
    
    const config = {
        method: "POST",
        // body:JSON.stringify(recipes),
        headers: {
        "Accept": "application/json",
        "Content-type": "application/json"
     }
    }
    return(dispatch)=>{
        
    fetch(RECIPES_URL,config)
    .then(response => 
    response.json())
    .then(resp => {
        dispatch({
            type: 'Add_Recipe',
            payload:{
                name: resp.name,
                ingredients: resp.ingredients,
                chef_name: resp.chef_name,
                origin: resp.origin,
                catagoryId: resp.catagoryId 
            }
        })
    })
      .catch((error) => console.log.error(error))

    }
    
    
}
 

Вот мой компонент контейнера, в который я поместил свой метод жизненного цикла, который находится в центре внимания этого вопроса

 import React, { Component } from 'react'
import RecipeList from '../components/RecipeList'
import RecipeInput from '../components/RecipeInput'
import { connect } from 'react-redux'
import { postRecipes } from '../actions/fetchRecipes.js'

class RecipeContainer extends Component{
    constructor(props){
        super(props)
    }

    
    componentDidMount(){
        
        this.props.postRecipes()
        
    }

    render(){
        return (
            <div>
               <RecipeInput addRecipe={this.props.addRecipe} /> 
               <RecipeList recipes={this.props.recipes} deleteRecipe={this.props.deleteRecipe} />
            </div>
        )
    }

    

}

const mapStateToProps = state =>{
    return{
        recipes: state.recipes
    }
}


const mapDispatchToProps= dispatch =>{
    return{
    addRecipe: () => dispatch(postRecipes()),
    // deleteRecipe: id => dispatch({type: 'Delete_Recipe', id})
    }
}



export default connect(mapStateToProps,mapDispatchToProps)(RecipeContainer)
 

Кто-нибудь может определить, где это может привести к моей ошибке? Держу пари, что «this.props» в
this.props.postRecipes() появляется неопределенным после того, как я зарегистрировал его в консоли.

Измените это

 const mapDispatchToProps= dispatch =>{
    return{
    addRecipe: () => dispatch(postRecipes()),
    // deleteRecipe: id => dispatch({type: 'Delete_Recipe', id})
    }
}
 

к этому

 const mapDispatchToProps= dispatch =>{
    return {
       postRecipes: () => dispatch(postRecipes()),  
    }

}