react条件动态条件渲染相同组件，组件没有重新渲染

问题描述

react条件渲染相同组件，没有重新渲染

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>
    );
  }
}

问题出现原因

组件是动态组件（需要动态更新），组件是需要刷新的，刷新的依据就是key,对于相同的key，React会采取和上一次刷新同样的方式。

问题解决过程

1. 搜索组件没有重新渲染，无结果
2. 因为我使用了条件渲染，所以去看官方文档条件渲染部分，无意间看到下一章列表渲染中关于组件渲染中key的描述，感觉是没有key导致的
3. 尝试给相同的组件加上key

问题解决方案

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>
    );
  }
}