'recipe' 映射数组时未定义
'recipe' is not defined when mapping a array
我目前正在尝试显示我的信息瓶 API,它正在返回 json 数据。
当运行以下代码时我得到错误:
Line 37:61: 'recipe' is not defined no-undef
Line 41:24: 'recipe' is not defined no-undef
Line 42:24: 'recipe' is not defined no-undef
这是它获取的数据:
https://pastebin.com/uYUuRY6U
代码如下:
import React, { Component } from 'react';
import Axios from 'axios';
import NavBar from '../header-footer/nav-bar'
import Featured from './FeaturedMealplan'
export default class MealPlanDetail extends Component {
constructor(props) {
super(props);
this.state = {
currentId: this.props.match.params.slug,
mealplanItem: {}, // Full mealplan
mealplanRecipes: [], // Contains recipe names and difficulty.
mealplanIngredients: [], // Ingredents of the recipe
}
}
getMealplanItem() {
Axios.get(`http://localhost:5000/get-mealplan/${this.state.currentId}`
).then(response => {
// console.log("response", response)
this.setState({
mealplanItem: response.data.mealplan,
mealplanRecipes: this.state.mealplanRecipes.concat(response.data.mealplan["recipes"]),
mealplanIngredients: this.state.mealplanIngredients.concat(response.data.mealplan["recipe_info"])
})
}).catch(error => {
console.log("mealplan-detail GET Error ", error)
})
}
componentDidMount() {
this.getMealplanItem();
}
render() {
const renderRecipes = this.state.mealplanRecipes.map((recipe, idx => {
return (
<div key={idx}>
<h1>
{recipe.recipe_name}
{recipe.recipe_dificulty}
</h1>
</div>
)
}))
return (
<div>
<NavBar/>
<Featured/>
{renderRecipes}
</div>
)
}
}
你的括号是错误的,地图函数的参数应该在它们自己的括号中。所以把它改成这样:
const renderRecipes = this.state.mealplanRecipes.map((recipe, idx) => {
return (
<div key={idx}>
<h1>
{recipe.recipe_name}
{recipe.recipe_dificulty}
</h1>
</div>
)
})
我目前正在尝试显示我的信息瓶 API,它正在返回 json 数据。
当运行以下代码时我得到错误:
Line 37:61: 'recipe' is not defined no-undef
Line 41:24: 'recipe' is not defined no-undef
Line 42:24: 'recipe' is not defined no-undef
这是它获取的数据: https://pastebin.com/uYUuRY6U
代码如下:
import React, { Component } from 'react';
import Axios from 'axios';
import NavBar from '../header-footer/nav-bar'
import Featured from './FeaturedMealplan'
export default class MealPlanDetail extends Component {
constructor(props) {
super(props);
this.state = {
currentId: this.props.match.params.slug,
mealplanItem: {}, // Full mealplan
mealplanRecipes: [], // Contains recipe names and difficulty.
mealplanIngredients: [], // Ingredents of the recipe
}
}
getMealplanItem() {
Axios.get(`http://localhost:5000/get-mealplan/${this.state.currentId}`
).then(response => {
// console.log("response", response)
this.setState({
mealplanItem: response.data.mealplan,
mealplanRecipes: this.state.mealplanRecipes.concat(response.data.mealplan["recipes"]),
mealplanIngredients: this.state.mealplanIngredients.concat(response.data.mealplan["recipe_info"])
})
}).catch(error => {
console.log("mealplan-detail GET Error ", error)
})
}
componentDidMount() {
this.getMealplanItem();
}
render() {
const renderRecipes = this.state.mealplanRecipes.map((recipe, idx => {
return (
<div key={idx}>
<h1>
{recipe.recipe_name}
{recipe.recipe_dificulty}
</h1>
</div>
)
}))
return (
<div>
<NavBar/>
<Featured/>
{renderRecipes}
</div>
)
}
}
你的括号是错误的,地图函数的参数应该在它们自己的括号中。所以把它改成这样:
const renderRecipes = this.state.mealplanRecipes.map((recipe, idx) => {
return (
<div key={idx}>
<h1>
{recipe.recipe_name}
{recipe.recipe_dificulty}
</h1>
</div>
)
})