Twilio Flex的TaskCanvasTabs添加多Tab组件时出现重复异常

问题描述 #

我正在使用Flex UI 2（beta.1和beta.2版本）开发Twilio Flex插件，尝试为TaskCanvasTabs添加多个Tab组件，编写了如下代码：

import React from 'react';
import { Tab } from '@twilio/flex-ui';
import { FlexPlugin } from '@twilio/flex-plugin';

import SmsPanel from './components/SmsPanel/SmsPanel';
import IncomingVideo from './components/IncomingVideo/IncomingVideo';

const PLUGIN_NAME = 'SendSmsV2Plugin';

export default class SendSmsV2Plugin extends FlexPlugin {
  constructor() {
    super(PLUGIN_NAME);
  }

  /**
   * This code is run when your plugin is being started
   * Use this to modify any UI components or attach to the actions framework
   *
   * @param flex { typeof import('@twilio/flex-ui') }
   */
  async init(flex, manager) {
    const options = {
      align: 'end',
    };
    flex.TaskCanvasTabs.Content.add(
      <Tab label='SMS' key='sms-panel-tab-key'>
        <SmsPanel key='sms-panel-component' />
      </Tab>,
      options,
    );
    flex.TaskCanvasTabs.Content.add(
      <Tab label='Video' key='video-panel-tab-key'>
        <IncomingVideo key='incoming-video-component' />
      </Tab>,
      options,
    );
  }
}

运行后发现首个添加的SMS Tab会出现重复，且每次切换到首个Tab、Call Tab等标签页时，该Tab的数量会持续增加。请问是否不允许为TaskCanvasTabs添加多Tab组件，或该如何解决此问题？

原因及解决方案 #

这个问题是因为Flex UI 2 Beta版本中，TaskCanvasTabs.Content.add()的调用会在每次任务画布重新渲染（比如切换标签、任务状态变化）时重复执行，导致Tab被多次添加。添加多个Tab是完全允许的，只需通过以下方法确保添加操作是幂等的：

方法1：使用uniqueKey参数（推荐） #

在调用add()方法时，给每个Tab传入唯一的uniqueKey，Flex会自动识别并避免重复添加：

async init(flex, manager) {
  const options = {
    align: 'end',
  };
  // 为SMS Tab设置唯一标识
  flex.TaskCanvasTabs.Content.add(
    <Tab label='SMS' key='sms-panel-tab-key'>
      <SmsPanel key='sms-panel-component' />
    </Tab>,
    { ...options, uniqueKey: 'sms-tab-unique' }
  );
  // 为Video Tab设置唯一标识
  flex.TaskCanvasTabs.Content.add(
    <Tab label='Video' key='video-panel-tab-key'>
      <IncomingVideo key='incoming-video-component' />
    </Tab>,
    { ...options, uniqueKey: 'video-tab-unique' }
  );
}

方法2：通过插件状态标记避免重复执行 #

在插件类中添加一个状态变量，标记Tab是否已添加，确保初始化逻辑只执行一次：

export default class SendSmsV2Plugin extends FlexPlugin {
  constructor() {
    super(PLUGIN_NAME);
    this.tabsAdded = false; // 初始化状态标记
  }

  async init(flex, manager) {
    if (this.tabsAdded) return; // 已添加则直接返回，跳过执行

    const options = {
      align: 'end',
    };
    flex.TaskCanvasTabs.Content.add(
      <Tab label='SMS' key='sms-panel-tab-key'>
        <SmsPanel key='sms-panel-component' />
      </Tab>,
      options
    );
    flex.TaskCanvasTabs.Content.add(
      <Tab label='Video' key='video-panel-tab-key'>
        <IncomingVideo key='incoming-video-component' />
      </Tab>,
      options
    );

    this.tabsAdded = true; // 更新状态，标记已完成添加
  }
}

补充说明 #

Flex UI 2 Beta版本的组件挂载逻辑尚未完全稳定，init方法可能会在任务状态变更、标签切换等场景下被重复触发。通过上述两种方法，可以确保每个Tab只被添加一次，解决重复出现的问题。

内容的提问来源于stack exchange，提问作者Katsumi Takahashi