反应 - 未捕获的轨道类型未定义数据的错误"映射"

Question

嗨，我正在制作一个视频项目在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', description: 'lorem ipsum', active: false },
{ id: 3, title: '3. Building a Hello World App', description: 'lorem ipsum', active: false },
{ id: 4, title: '4. Adding React Router Dom to your Appp', description: 'lorem ipsum', active: false },
]
}
}
render() {
return (
<div>
<Jumbotron/>
<Table course_modules={this.state.course_moudules}/>
</div>
)
}
}
export default Home

任何帮助将不胜感激，我只是开始与反应，我有点熟悉rails。我真不知道我错过了什么。

Answer 1

看起来像是打字错误。请确保使用正确的变量名称course_modules.

const items = this.props.course_modules.map( (data) => {
return <Item key={data.id} title={data.title} description={data.description}/>
})

这里也请修改

<Table course_modules={this.state.course_modules}/>