TypeError:类别未定义

Question

我把程序搞疯了。我试图对之前的一个问题进行一些调整，我有一个未经允许的参数：：配方问题。我基本上将属性封装在一个配方对象中，希望与由于强参数而发送到后端的内容相匹配。我指了指做出这些改变的地方。这一问题是否得到解决取决于目前这一问题的解决情况。在做了一些更改后，我一直得到TypeError:categories是未定义的，因为我使用redux调整了前端调度负载的操作类型。

switch(action.type){
case 'Add_Recipe':
const recipe = {
recipe:{   <-----I encapsulated everything within a recipe value and recipe as my key
name: action.name,
ingredients: action.ingredients,
chef_name: action.chef_name,
origin: action.origin,
// categoryId: action.categoryId,
category: action.category
}
}
return{
...state,
recipes: [...state.recipes, recipe],
}

default:
return state

}
}

为了确保我的一切都与此更改一致，我还更改了RecipeInput组件中的初始状态和setState。注意：我特意为这个代码片段省略了事件处理程序

import React, { Component } from 'react'
import  Categories  from './Categories.js'

class RecipeInput extends Component{
constructor(props){
super(props)
this.state = {
recipe:{  <-----I encapsulated everything within a recipe value and recipe as my key
category: [],
name:'',
ingredients: '',
chef_name: '',
origin: ''
}
}
this.handleNameChange.bind(this)
this.handleOriginChange.bind(this)
this.handleChefChange.bind(this)
this.handleIngChange.bind(this)


}

componentDidMount(){
let initialCats = [];
const BASE_URL = `http://localhost:10524`
const CATEGOREIS_URL =`${BASE_URL}/categories`
fetch(CATEGOREIS_URL)
.then(resp => resp.json())
.then(data => {

initialCats = data.map((category) => {
return category
})
console.log(initialCats)
this.setState({
category: initialCats,
})   
});
}

handleSubmit = (event) =>{
event.preventDefault();
this.props.postRecipes(this.state)
this.setState({
recipe:{   <-----I encapsulated everything within a recipe value and recipe as my key
name:'',
ingredients: '',
chef_name: '',
origin: ''
}
})
}


render(){
return(
<div>
<form onSubmit={this.handleSubmit}>
<Categories category={this.state.category}/>
<div>
<label for='name'>Recipe Name:</label>
<input type='text' value={this.state.name} onChange={this.handleNameChange} />
</div>
<div>
<label for='name'>Country Origin:</label>
<input type='text' value={this.state.origin} onChange={this.handleOriginChange} />
</div>
<div>
<label for='name'>Chef Name:</label>
<input type='text' value={this.state.chef_name} onChange={this.handleChefChange} />
</div>
<div>
<label for='name'>Ingredients:</label>
<textarea value={this.state.ingredients} onChange={this.handleIngChange} />
</div>
<input value='submit' type='submit'/>
</form>
</div>
)
}



}
export default RecipeInput

我还在配方后操作中进行了必要的更改

export const postRecipes = (recipe)=>{
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"
}
}
//category field
return(dispatch)=>{
fetch(RECIPES_URL,config)
.then(response => 
response.json())
.then(resp => {
dispatch({
type: 'Add_Recipe',
payload:{
recipe:{  <-----I encapsulated everything within a recipe value and recipe as my key
category:resp.category,
name: resp.name,
ingredients: resp.ingredients,
chef_name: resp.chef_name,
origin: resp.origin,
// categoryId: resp.categoryId 
}
}
})
})
//.then(response => <Recipe />)
.catch((error) => console.log.error(error))
}


}

在做出这些更改后，我开始在categories组件中得到TypeError:categories是未定义的错误。

import React, { Component } from 'react'
class Categories extends Component{

render(){
let categories = this.props.category
//I am getting screamed at for categories being undefined after previous changes
let optionItems = categories.map((cat,index) =>
<option key={index}>{cat.category}</option>
)

return (
<div>
<select>
{optionItems}
</select>
</div>
)
}
}
export default Categories

在将所有内容封装为recipe作为我的键并将所有其他属性封装为值之后，类型错误开始发生。在做出改变后，有人能帮我指出我的弱点吗？

Answer 1

我认为您正在使用未定义的数据更新获取的状态：

this.setState({
category: initialCats
})

您已经将类别属性封装在配方对象中。所以它应该是这样的：

this.setState({
recipe: {
...this.state.recipe,
category: initialCats,
}
})

在您的Categories组件返回中，您也可以这样做，例如显示类别正在加载：

return (
<div>
<select>
{this.props.category.length ? optionItems : <p>Loading...</p>}
</select>
</div>
)