TypeError:this.props.getRecipes不是函数

Question

我创建了一个基本上是"GET"获取请求的操作，当应用程序编译时，我会收到这个TypeError: this.props.getRecipes is not a function错误。我试图实现的是，当我在表单中创建配方时，它会将其发送到后端以保存在数据库中，然后getRecipes()函数将自动执行获取请求，该请求将随着配方的不断添加而动态更新前端显示的列表。

我添加了一个名为getRecipes():的操作

import Recipe from '../components/Recipe.js'
export const getRecipes = () => {
const BASE_URL = `http://localhost:10524`
const RECIPES_URL =`${BASE_URL}/recipes`

return()=>{
fetch(RECIPES_URL)
.then(resp => resp.json())
.then(recipes => recipes.map(recipe => {
return <div><Recipe recipe={recipe} key={recipe.id}/></div>
}));
}
}

我在RecipeList组件中导入，并使用Lifecyle方法，如果涉及fetch或async请求，这是非常标准的方法。

import React, {Component} from 'react';
import { getRecipes } from '../actions/getRecipes.js'

class RecipeList extends Component {

componentDidMount(){
this.props.getRecipes()<------- it's saying that this is the issue here
}
render() {

return (
<div>
{getRecipes}
</div>
)

}


}
export default RecipeList;

然后它应该显示在我的RecipesContainer组件上。

import RecipeInput from '../components/RecipeInput'
import { connect } from 'react-redux'
import { postRecipes } from '../actions/postRecipes.js'
import { getRecipes } from '../actions/getRecipes'

class RecipeContainer extends Component{
constructor(props){
super(props)
}
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{
postRecipes: () => dispatch(postRecipes()),
getRecipes: () => dispatch(getRecipes())//I don't think this is needed if I am not calling a dispatch on this

}
}

export default connect(mapStateToProps,mapDispatchToProps)(RecipeContainer)

当应用程序编译时，我哪里出错了？

Answer 1

更改：

componentDidMount(){
this.props.getRecipes()<------- it's saying that this is the issue here
}

收件人：

componentDidMount(){
getRecipes();
}