react render里面多次循环，怎么破

render(){

    if(this.state.loading){
        return <Loading/>;
    }else{
        let [header={},bodyHtml=[]]=[this.state.articleDetail.header];
        this.state.articleDetail.body.content.forEach(function (item1,index1) {
            bodyHtml.push(<h4 key={index1}>{item1.firstTitle}</h4>);
            item1.firstTitleDes.forEach(function (item2,index2) {
                bodyHtml.push(<h6 key={''+index1+index2}>{item2.secondTitle}</h6>);
                item2.secondTitleDes.forEach(function (item3,index3) {
                    bodyHtml.push(
                        <div key={''+index1+index2+index3}>
                            <p>{item3.describle}</p>
                            <pre><code className={item3.codeType}>{item3.code}</code></pre>
        return (
                <Head/>
                <div className="container">
                    <header className="aticle-header">
                        <h2>{header.title}</h2>
                        <p>发表于&nbsp;&nbsp;{header.date}&nbsp;&nbsp;|&nbsp;&nbsp;in&nbsp;&nbsp; <Link to="/">{header.type}</Link></p>
                    </header>
                    <article className="aticle-body">{bodyHtml}</article>