我在回答有关此问题的其他问题时遇到了问题,所以这里什么都不做。
所以我正在使用 redux thunk 来“发布”到数据库,并希望使用 fetch 在前端视图上显示......但这不是我的问题所在,只是想让你了解我想要结束的地方在某一点。 所以我的问题是我的 mapStateToProps 函数出现“TypeError: state is undefined”,我以为我设置正确。
下面是显示在我的浏览器中的代码片段,显示了问题所在。
0 | const mapStateToProps = state =>{
31 | return{
> 32 | recipes: state.recipes,
33 | }
34 | }
35 |
.....我希望我不会在下一部分失去任何人
到目前为止......这是我的 RecipeContainer 组件,其中定义并连接了我的 mapStateToProp 函数。
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)
这是我的减速器,显示了我将“Add_Recipe”操作类型放在一起的位置
import cuid from 'cuid';
export const cuidFn = cuid
export default function manageRecipes(state={
recipes:[],
catagories:[],
}, action){
switch(action.type){
case 'Add_Recipe':
const recipe = {
name: action.name,
ingredients: action.ingredients,
chef_name: action.chef_name,
origin: action.origin,
catagoryId: action.catagoryId,
catagories: action.catagories,
id: cuidFn()
}
return{
...state,
recipes: [...state.recipes, recipe],
}
}
最后(不确定这有多相关.....这是我在自己的文件中定义的“postRecipe”操作
export function postRecipes(){
const BASE_URL = `http://localhost:10524`
const RECIPES_URL =`${BASE_URL}/recipes`
const config = {
method: "POST",
body:JSON.stringify(recipe),
headers: {
"Accept": "application/json",
"Content-type": "application/json"
}
}
return(dispatch)=>{
fetch(RECIPES_URL,config)
.then(response =>
response.json())
.then(resp => {
dispatch({
type: 'Add_Recipe',
paylaod:{
name: resp.name,
ingredients: resp.ingredients,
chef_name: resp.chef_name,
origin: resp.origin,
catagoryId: resp.catagoryId
}
})
})
.catch((error) => console.log.error(error))
}
}
我想基本上知道我在 mapStateToProp 函数中最初提到的状态是如何未定义的,以及我是否遗漏了我提供的代码中的任何内容。 Redux 有点难以掌握。
答案 0 :(得分:0)
如果您将 paylaod 更改为有效负载,它应该可以工作。您的状态为 undefined,因为负载未随调度发送。
export function postRecipes() {
const BASE_URL = `http://localhost:10524`
const RECIPES_URL = `${BASE_URL}/recipes`
const config = {
method: "POST",
body: JSON.stringify(recipe),
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))
}
}