Javascript 不明白为什么react组件不从数据渲染

我试图弄清楚为什么我的react组件中的某些标记没有呈现。没有抛出任何错误

我正在传递表单的组件数据：

const moduleData = {
    openTickets: {
        title: 'Open Tickets',
        stats: [
            [ //rows
                {
                    stat: 2,
                    desc: 'New',
                },
                {
                    stat: 2,
                    desc: "Unseen for > 24 hours",
                }
            ],
            [
                {
                    stat: 32,
                    desc: 'In Progress'
                },
                {
                    stat: 2,
                    desc: 'In progress for > 1 week',
                }
            ]
        ]
    }
}

...

<DashboardModule data={moduleData.openTickets}/>

const moduleData={
公开门票：{
标题:"公开门票",，
统计数据：[
[//行
{
统计：2，
描述：'新'，
},
{
统计：2，
描述：“24小时以上不可见”，
}
],
[
{
统计数字：32，
描述：“正在进行”
},
{
统计：2，
描述：“进行中超过1周”，
}
]
]
}
}
...

仪表板模块组件如下所示：

import React, {Fragment} from 'react';

function DashboardModule(props) {
    const {data} = props;
    return(
    <div className="dashboard__module">
        <div className="dashboard__module_header">
            <h3 className="dashboard__module_title h2">{data.title}</h3>
        </div>
        {
            data.stats.forEach((statRow,index)=>{
                console.log(statRow,index);
                return (
                    <div className="dashboard__module_row" key={`module_row--${index}`}>
                        {
                            statRow.forEach((stat,statIndex)=>{
                                console.log(stat.stat);
                                return (
                                    <div key={`stat_container--${statIndex}`}className={`dashboard__module_stat_container ${statIndex === 0 && 'primary'}`}>
                                        <p className="dashboard__module_stat">{stat.stat}</p>
                                        <p className="dashboard__module_desc">{stat.desc}</p>
                                    </div>
                                )
                            })
                        }
                    </div>
                )
            })
        }
    </div >
    );
};

export default DashboardModule;

import React，{Fragment}来自'React'；
功能仪表板模块（道具）{
const{data}=props；
返回(
{data.title}
{
data.stats.forEach（（statRow，index）=>{
console.log（statRow，index）；
返回(
{
statRow.forEach（（stat，statidex）=>{
console.log（stat.stat）；
返回(
{stat.stat}
{stat.desc}
)
})
}
)
})
}
);
};
导出默认仪表板模块；

控制台日志提供了正确的数据，但在以下事件之后没有标记：

<div className="dashboard__module_header">
    <h3 className="dashboard__module_title h2">{data.title}</h3>
</div>

{data.title}

---

我缺少什么？

我认为您需要使用data.stats.map（）而不是foreach（）

使用

map

而不是

foreach

forEach

只遍历集合，不返回结果。

你需要使用map not forEach我不确定这个问题为什么会被否决我同意，这个问题似乎有效，否决票应该被删除。好吧，公平地说……在这一点上，我可能应该知道何时使用map和forEach。。。