Javascript jsx渲染函数中的循环使用if-else条件进行反应

我有如下数据

this.state.jsonData = [
        {
        category: "1",
        clientname: "rahul1",
        reporthtml: "hello1"
        },
        {
                category : "1",
                clientname: "rahul2",
                reporthtml: "hello2"
        },

        {
                category : "2",
                clientname: "rahul2",
                reporthtml: "hello2"
        },
         {
                category : "2",
                clientname: "rahul2",
                reporthtml: "hello2"
        },
        {
                category : "2",
                clientname: "rahul2",
                reporthtml: "hello2"
        },
];

现在我需要在react jsx中呈现它，如下所示。不能使if-else只显示同一类别一次

我的html：

<div>
<div> Category Name</div>
<div>Client Name</div>
<div>Client Html</div>
<div>Client Name</div>
<div>Client Html</div>
<div>Client Name</div>
<div>Client Html</div>
</div>
<div>
<div> Category Name</div>
<div>Client Name</div>
<div>Client Html</div>
<div>Client Name</div>
<div>Client Html</div>
<div>Client Name</div>
<div>Client Html</div>
</div>


{this.state.jsonData.map(function(category,i) {
   return <div> category.category</div>// This line will only print once for each category need if else condition
   <div>Client Name</div>
   <div>Client Html</div>  ;
})}

类别名称
客户名称
客户端Html
客户名称
客户端Html
客户名称
客户端Html
类别名称
客户名称
客户端Html
客户名称
客户端Html
客户名称
客户端Html
{this.state.jsonData.map（函数（类别，i）{
return category.category//此行仅针对每个类别需要打印一次，如果存在其他条件
客户名称
客户端Html；
})}

如果我正确地推断出您想要什么，您只需使用嵌套的

映射即可：

render() {
    return <div>
        {this.state.jsonData.map(function(category) {
            return <div>
                <div>Category: {category.category}</div>
                {category.categorydata.map(function(data) {
                    return <div>
                        <div>Client: {data.clientname}</div>
                        <div>Report: {data.reporthtml}</div>
                    </div>;
                })}
                </div>;
        })}
    </div>;
}

render（）{
返回
{this.state.jsonData.map（函数（类别））{
返回
类别：{Category.Category}
{category.categorydata.map（函数（数据））{
返回
客户端：{data.clientname}
报表：{data.reporthtml}
;
})}
;
})}
;
}

实例：


类类别扩展了React.Component{
构造函数（…参数）{
超级（…args）；
this.state={}；
this.state.jsonData=[{
类别：“1”，
分类数据：[{
客户名称：“rahul1”，
reporthtml:“hello1”
}, {
客户名称：“rahul2”，
reporthtml:“hello2”
}, ]
}, {
类别：“2”，
分类数据：[{
客户名称：“rahul1”，
reporthtml:“hello1”
}, {
客户名称：“rahul2”，
reporthtml:“hello2”
}, ]
}];
}
render（）{
返回
{this.state.jsonData.map（函数（类别））{
返回
类别：{Category.Category}
{category.categorydata.map（函数（数据））{
返回
客户端：{data.clientname}
报表：{data.reporthtml}
;
})}
;
})}
;
}
};
ReactDOM.render(
,
document.getElementById（“react”）
);
如果您有es6，您可以这样增强代码：

render() {
        return <div>
            {
                this.state.jsonData.map(category => <div>
                    <div>Category: {category.category}</div>
                    {
                        category.categorydata.map(data => <div>
                            <div>Client: {data.clientname}</div>
                            <div>Report: {data.reporthtml}</div>
                        </div>
                    )
                    }
                    </div>
            )}
        </div>
    }

render（）{
返回
{
this.state.jsonData.map（category=>
类别：{Category.Category}
{
category.categorydata.map（数据=>
客户端：{data.clientname}
报表：{data.reporthtml}
)
}
)}
}
我更改了数组，在循环中我需要一些if-else条件使用Javascript映射或reducer遍历对象数组