困惑为什么反应组件不从数据渲染

Question

我想弄清楚为什么我的 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>

我错过了什么？

Answer 1

我认为你需要使用 data.stats.map() 而不是 foreach()

Answer 2

使用 map 而不是 forEach。 forEach只是遍历集合，不返回结果

困惑为什么反应组件不从数据渲染

Confused why react component not rendering from data

javascript

reactjs

react-functional-component