嗨，我正在 Rails 中制作一个视频项目并做出反应，我一定错过了一些东西，因为当我尝试“映射”未定义的数据时，我不确定如何正确传递变量。它只显示一个只有 rails 内容的空白页面。 这是我正在使用的。

Table.js

import React,{ Component } from 'react'
import Item from './Item'

class Table extends Component {
    constructor(props){
        super(props)
    }

    render(){
        const items = this.props.course_moudules.map( (data) => {
            return <Item key={data.id} title={data.title} description={data.description}/>
        })
        return(
            <div classname="pt-5 pb-5">
                <div classname="container">
                 <div classname="text-center">
                    <h2 classname="pt-4 pb-4">React for Rails Developers - Videos</h2>
                </div>

                {items}
                </div>
            </div>
        )
    }
}

export default Table

Item.js

import React,{ Component } from 'react'
import Thumbnail from './Thumbnail'

const Item = (props) => {
    return (
        <div classname="row">
            <div classname="col-md-10 offset-md-1">
                <div classname="text-center">
                    <div classname="card px-5">
                        <div classname="row">
                            <div classname="col-md-4">
                                <Thumbnail/>
                            </div>
                            <div classname="col-md-8">
                                <div classname="pt-4 pb-4">
                                    <h4>{props.title}</h4>
                                    <p>{props.description}</p>
                                    <div classname="cta-wrapper">
                                        <a classname="btn cta-btn">Watch This Video</a>
                                    </div>
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Item

Home.js

import React,{ Component } from 'react'
import Jumbotron from './Jumbotron'
import Table from './Table/Table'

class Home extends Component {
    constructor(){
        super()
        this.state = {
            course_modules: [
                { id: 1,title: '1. Setting up a new Ruby on Rails app with React',description: 'lorem ipsum',active: false },{ id: 2,title: '2. Adding React to an Existing Rails App',{ id: 3,title: '3. Building a Hello World App',{ id: 4,title: '4. Adding React Router Dom to your Appp',]
        }
    }
    render() {
        return (
            <div>
            <Jumbotron/>
            <Table course_modules={this.state.course_moudules}/>
            </div>
            )
    }
}

export default Home

任何帮助将不胜感激我刚刚开始反应我对rails有点熟悉。我真的不确定我错过了什么。