-1

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

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

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>

我错过了什么？

4

2 回答 2

2

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

于 2020-02-27T23:47:27.603 回答
0

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

于 2020-02-27T23:41:43.067 回答