Javascript 无法分析子组件中的道具

我试图在创建React组件时实现表示组件和容器组件模式。因此，我创建了一个仅包含UI元素的表示组件和具有处理数据功能的容器组件

component.jsx

从“React”导入React；
常量MyComponent=（{props}）=>(
{props.games.map（（游戏，索引）=>(
{game.index+1}-{game.contestName}
))};
);
导出默认MyComponent；

container.jsx

import React，{Component}来自“React”；
从“/component”导入MyComponent；
类MyContainer扩展组件{
建造师（道具）{
超级（道具）；
此.state={
游戏：[
{
id:1，
类别名称：“企业/公司”，
竞赛名称：“名称1”
},
{
id:2，
类别名称：“杂志/时事通讯”，
竞赛名称：“名称2”
},
{
id:3，
类别名称：“软件组件”，
竞赛名称：“名称3”
},
{
id:4，
类别名称：“网站”，
竞赛名称：“名称4”
}
]
};
}
render（）{
返回(
);
}
}
导出默认MyContainer；

但是，我无法渲染数据，因此

未捕获类型错误： 无法读取未定义的属性“games”

---

非常感谢您的帮助，因为两天的网络挖掘没有产生积极的结果。

您应该对

游戏进行解构，而不是
道具
：

import React from "react";

const MyComponent = ({games}) => (
<div>
{games.map((game, index) => (
  <div key={index}>
    {game.index + 1} - {game.contestName}
  </div>
))};
</div>
);

export default MyComponent;

从“React”导入React；
常量MyComponent=（{games}）=>(
{games.map（（游戏，索引）=>(
{game.index+1}-{game.contestName}
))};
);
导出默认MyComponent；
你应该解构你的
游戏
，而不是
道具
：

import React from "react";

const MyComponent = ({games}) => (
<div>
{games.map((game, index) => (
  <div key={index}>
    {game.index + 1} - {game.contestName}
  </div>
))};
</div>
);

export default MyComponent;

从“React”导入React；
常量MyComponent=（{games}）=>(
{games.map（（游戏，索引）=>(
{game.index+1}-{game.contestName}
))};
);
导出默认MyComponent；

当你这么做的时候，你真的做到了

{props:从父级收到的props}

您将道具封闭在另一个对象中，请移除这些大括号并将该行更改为

constmycomponent=（道具）=>（

你可以走了

当你这么做的时候，你真的做到了

{props:从父级收到的props}

您将道具封闭在另一个对象中，请移除这些大括号并将该行更改为

constmycomponent=（道具）=>（

您可以这样定义MyComponent类

class MyComponent extends Component{

    render(){
        this.xyz = this.props.games.map((item,index) => {
            return(<div key={index}>{item.id}</div>)
        })
        return(
            <div>
                {this.xyz}
            </div>
        )

    }
}

export default MyComponent;

类MyComponent扩展组件{
render（）{
this.xyz=this.props.games.map（（项目，索引）=>{
返回（{item.id}）
})
返回(
{this.xyz}
)
}
}
导出默认MyComponent；

这也行！
您可以这样定义MyComponent类

class MyComponent extends Component{

    render(){
        this.xyz = this.props.games.map((item,index) => {
            return(<div key={index}>{item.id}</div>)
        })
        return(
            <div>
                {this.xyz}
            </div>
        )

    }
}

export default MyComponent;

类MyComponent扩展组件{
render（）{
this.xyz=this.props.games.map（（项目，索引）=>{
返回（{item.id}）
})
返回(
{this.xyz}
)
}
}
导出默认MyComponent；

这也行！
这个答案解释了，你问题的解决方案这个答案解释了，你问题的解决方案谢谢，太多了，它帮助了。谢谢，太多了，它帮助了。
class MyComponent extends Component{

    render(){
        this.xyz = this.props.games.map((item,index) => {
            return(<div key={index}>{item.id}</div>)
        })
        return(
            <div>
                {this.xyz}
            </div>
        )

    }
}

export default MyComponent;