我正在尝试从端点获取课程中包含的简单课程列表。

如果我尝试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/

10-11 11:44