我正在尝试从端点获取课程中包含的简单课程列表。
如果我尝试console.log(this.state.course.lessons)
,则显示包含3个项目的数组。
但是,如果尝试console.log(this.state.course.lessons.map(//function)
,我会不断
TypeError:this.state.course.lessons未定义
如何将函数映射到课程数组,以便将它们呈现为列表。
零件
import React, { Component } from 'react'
export class CourseDetail extends Component {
constructor(props) {
super(props);
this.state = {
course: []
};
}
componentDidMount() {
fetch(`http://127.0.0.1:8000/api/courses/${this.props.match.params.id}`)
.then(res => res.json())
.then((course) => {
this.setState({
course: course,
});
console.log(this.state.course.lessons)
});
}
render() {
return (
<div>
{this.state.course.lessons.map((lesson)=>(console.log(lesson)))}
<h1>{this.state.course.title}</h1>
</div>
)
}
}
export default CourseDetail
从端点返回的json
{
"id": 1,
"lessons": [
1,
2,
3
],
"owner": 1,
"rating": 0,
"title": "Course 1",
"description": "course 1 desc",
"pub_date": "2019-11-23",
"is_live": false,
"category": 1
}
最佳答案
最明显的解决方案是,如果要访问该对象,则为其赋予默认状态:
constructor(props) {
super(props);
this.state = {
course: {
lessons: []
}
};
}
关于javascript - TypeError:尽管能够正确记录变量,但 undefined variable ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/59095854/