[英]Confused why react component not rendering from data
我想弄清楚为什么我的 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}/>
并且 DashboardModuleComponent 如下:
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;
控制台日志提供了正确的数据,但在以下之后没有标记:
<div className="dashboard__module_header">
<h3 className="dashboard__module_title h2">{data.title}</h3>
</div>
我错过了什么?
使用map
而不是forEach
。 forEach
只是遍历集合,不返回结果。
我认为你需要使用 data.stats.map() 而不是 foreach()
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.