Javascript HTML文本未正确呈现

我在申请表中有一个邮件部分。我在用你的笔记

我在应用程序中有5个侧选项卡和2个主选项卡，如下所示：

现在，当我打开“发送邮件”并单击“有效性”时，我得到了正确的输出。正如你所看到的，我已经在体内加载了药效，你看到了药效的正确大小，即h2

但是，当我切换到“发送文本”选项卡，然后返回到“发送邮件”选项卡时，我看到一个不同的输出，其中甚至显示了h2标记，我想删除这些标记。我还看到了某种类型的字符串和p标记，它们也被添加了。其他选项卡也存在同样的问题

下面是我管理切换的代码。“textMail”状态用于处理“发送邮件”和“发送文本”之间的切换。侧边栏单击状态用于处理疗效、患者护理等之间的切换

 class EngageWithHCP extends Component {

state = {
    subject: "",
    summerNoteBody: '',
    textMail: 'mail',
    sideBarClick: '',
    textBody: '',
}

  <div class="file-manager">
<div class="form-group" style={{display: 'flex'}}>
    <button style = {{ marginRight: '10px'}}onClick={() => { this.toggleTextMail('mail') }}
        className={this.state.textMail === 'mail' ? "btn btn-primary" : "btn btn-white"}>
        Send Mail
    </button>
    <button onClick={() => { this.toggleTextMail('text') }}
        className={this.state.textMail === 'text' ? "btn btn-primary" : "btn btn-white"}>
        Send Text
    </button>
</div>
<div class="space-25"></div>
<h5>Templates</h5>
<ul class="category-list" style={{ padding: 0 }}>
    <li><button style={{ textAlign: 'left' }} onClick={() => this.sideBarClick('efficacy')}
        className={this.state.sideBarClick === 'efficacy' ? "btn btn-primary btn-block" : "btn btn-white btn-block"}>
        <i class="fa fa-circle text-navy"></i>Efficacy
        </button>
    </li>
    <li><button style={{ textAlign: 'left' }} onClick={() => this.sideBarClick('patientCare')}
        className={this.state.sideBarClick === 'patientCare' ? "btn btn-primary btn-block" : "btn btn-white btn-block"}
    >
        <i class="fa fa-circle text-danger"></i>Patient Care
        </button>
    </li>
    </div>

这是侧边栏点击功能，用于处理疗效、患者护理等切换

   sideBarClick = (tab) => {
    if (this.state.textMail === 'mail') {
        if (tab === 'efficacy') {
            var efficacyText = this.props.mailData[301].template_info[0].template_body_email
            var efficacySubject = this.props.mailData[301].template_info[0].template_subject
            this.setState({ summerNoteBody: efficacyText, subject: efficacySubject, sideBarClick: 'efficacy' })
        }
        else if (tab === 'patientCare') {
            var patientCareText = this.props.mailData[301].template_info[1].template_body_email
            var patientCareSubject = this.props.mailData[301].template_info[1].template_subject
            this.setState({ summerNoteBody: patientCareText, subject: patientCareSubject, sideBarClick: 'patientCare' })

        }
   else if (this.state.textMail === 'text') {
        if (tab === 'efficacy') {
            var efficacyText = this.props.mailData[301].template_info[0].template_body_msg
            this.setState({ textBody: efficacyText, sideBarClick: 'efficacy' })
        }
        else if (tab === 'patientCare') {
            var patientCareText = this.props.mailData[301].template_info[1].template_body_msg
            this.setState({ textBody: patientCareText, sideBarClick: 'patientCare' })
        }

有人能告诉我为什么我要面对这个问题吗？我应该在代码中做什么更改来避免这种情况

编辑1:

---

更重要的是，状态“summerNoteBody”控制着保存有效性的盒子。“textBody”状态是另一个选项卡（发送文本），我还没有添加屏幕截图。因此，请检查我正在设置summerNoteBody状态的区域。

如果有人对代码的逻辑有任何疑问，请告诉我。

   sideBarClick = (tab) => {
    if (this.state.textMail === 'mail') {
        if (tab === 'efficacy') {
            var efficacyText = this.props.mailData[301].template_info[0].template_body_email
            var efficacySubject = this.props.mailData[301].template_info[0].template_subject
            this.setState({ summerNoteBody: efficacyText, subject: efficacySubject, sideBarClick: 'efficacy' })
        }
        else if (tab === 'patientCare') {
            var patientCareText = this.props.mailData[301].template_info[1].template_body_email
            var patientCareSubject = this.props.mailData[301].template_info[1].template_subject
            this.setState({ summerNoteBody: patientCareText, subject: patientCareSubject, sideBarClick: 'patientCare' })

        }
   else if (this.state.textMail === 'text') {
        if (tab === 'efficacy') {
            var efficacyText = this.props.mailData[301].template_info[0].template_body_msg
            this.setState({ textBody: efficacyText, sideBarClick: 'efficacy' })
        }
        else if (tab === 'patientCare') {
            var patientCareText = this.props.mailData[301].template_info[1].template_body_msg
            this.setState({ textBody: patientCareText, sideBarClick: 'patientCare' })
        }