Condition react the same components rendering dynamic condition, without re-rendering component

Problem Description

react conditions render the same components, no re-rendering

render() {
    const { history } = this.props;
    const { submit, loading, stateEditor, loadingPage, detailData } = this.state;
    const elementEditor = (
      <Tabs defaultActiveKey="1">
        <TabPane tab="1.资源商品基本信息配置" key="1">
          <BaseDeploy stateEditor={this.getId()} detailData={detailData} handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
        <TabPane tab="2.资源商品规格参数配置" key="2">
          <Builder stateEditor={this.getId()} handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
        <TabPane tab="3.资源商品详情配置" key="3">
          <BasicEditor stateEditor={this.getId()} handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
      </Tabs>
    )
    const elementAdd = (
      <Tabs defaultActiveKey="1">
        <TabPane tab="1.资源商品基本信息配置" key="1">
          <BaseDeploy handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
        <TabPane tab="2.资源商品规格参数配置" key="2">
          <Builder handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
        <TabPane tab="3.资源商品详情配置" key="3">
          <BasicEditor handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
      </Tabs>
    )
    return (
      <div className={styles.root}>
        <div style={{ width: 208 }}>
          <Button
            type="link"
            block
            style={{ fontSize: 18, padding: 0, textAlign: 'left', color: '#111111' }}
            onClick={() => { history.goBack() }}
          >
            <Icon type="arrow-left" />
            {stateEditor ? '编辑资源商品' : '新增资源商品'}
          </Button>
        </div>
        {stateEditor ?
          (
            <Spin spinning={loadingPage}>
              {loadingPage ? elementAdd : elementEditor}
            </Spin>
          ) :
          elementAdd}
        <Divider />
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
          <Button loading={loading} type="primary" style={{ marginRight: 8 }} onClick={this.submit}>确认</Button>
          {/* <Button style={{ marginRight: 8 }}>预览</Button> */}
          <Button onClick={() => { history.goBack() }}>取消</Button>
        </div>
      </div>
    );
  }
}

Cause of the problem

Component is a dynamic component (dynamically updated), the component is a need to be refreshed, based refresh is key, for the same key, React and will take the time to refresh the same way.

Problem-solving process

1. Search component is not re-rendered , no result
2. Because I used the conditions rendering, so to see the official document conditions render part, inadvertently see the next chapter for a description of the list rendered rendering key components, the feeling is not the key cause
3. Try to give the same components plus key

Problem Solution

render() {
    const { history } = this.props;
    const { submit, loading, stateEditor, loadingPage, detailData } = this.state;
    const elementEditor = (
      <Tabs key="editor" defaultActiveKey="1">
        <TabPane tab="1.资源商品基本信息配置" key="1">
          <BaseDeploy stateEditor={this.getId()} detailData={detailData} handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
        <TabPane tab="2.资源商品规格参数配置" key="2">
          <Builder stateEditor={this.getId()} handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
        <TabPane tab="3.资源商品详情配置" key="3">
          <BasicEditor stateEditor={this.getId()} handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
      </Tabs>
    )
    const elementAdd = (
      <Tabs key="add" defaultActiveKey="1">
        <TabPane tab="1.资源商品基本信息配置" key="1">
          <BaseDeploy handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
        <TabPane tab="2.资源商品规格参数配置" key="2">
          <Builder handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
        <TabPane tab="3.资源商品详情配置" key="3">
          <BasicEditor handleReciveSubmit={this.handleReciveSubmit} submit={submit} />
        </TabPane>
      </Tabs>
    )
    return (
      <div className={styles.root}>
        <div style={{ width: 208 }}>
          <Button
            type="link"
            block
            style={{ fontSize: 18, padding: 0, textAlign: 'left', color: '#111111' }}
            onClick={() => { history.goBack() }}
          >
            <Icon type="arrow-left" />
            {stateEditor ? '编辑资源商品' : '新增资源商品'}
          </Button>
        </div>
        {stateEditor ?
          (
            <Spin spinning={loadingPage}>
              {loadingPage ? elementAdd : elementEditor}
            </Spin>
          ) :
          elementAdd}
        <Divider />
        <div style={{ display: 'flex', justifyContent: 'center', marginBottom: 16 }}>
          <Button loading={loading} type="primary" style={{ marginRight: 8 }} onClick={this.submit}>确认</Button>
          {/* <Button style={{ marginRight: 8 }}>预览</Button> */}
          <Button onClick={() => { history.goBack() }}>取消</Button>
        </div>
      </div>
    );
  }
}