Twilio Flex插件自定义按钮调用Action传参问题

问题场景 #

需要在Twilio Flex插件的任务面板Reject按钮旁新增自定义SendToVm按钮，点击后将当前呼叫转回IVR流程进入语音留言环节，且不覆盖原有RejectTask动作的默认逻辑。

直接替换RejectTask动作的可运行参考代码如下：

flex.Actions.replaceAction('RejectTask', async (payload, original) => {

    const url: string = payload.task.attributes.transferToIvrUrl;
    const CallSid: string = payload.task.attributes.call_sid;
    const reservationSid = payload.sid;
    const transferToIVRMenu = 'vm';

    if (!url || !CallSid) {
        await original(payload);
        return;
    }

    await manager.workerClient.reservations.get(reservationSid)?.accept();
    await manager.workerClient.reservations.get(reservationSid)?.wrap();
    await manager.workerClient.reservations.get(reservationSid)?.complete();
    await request(url, { CallSid, transferToIVRMenu });
});

按照自定义按钮+自定义Action的方式实现时，出现调用Action时payload为undefined的问题，无法获取task属性、CallSid、reservationSid等必需参数。该问题的核心原因是自定义按钮未从Flex上下文获取当前任务参数，且调用Action时未传入对应payload。

正确实现步骤 #

1. 注册自定义Action #

在添加按钮组件前先注册自定义SendToVmTask动作，补充参数空值校验避免运行时报错：

flex.Actions.registerAction('SendToVmTask', async (payload) => {
    // 校验必填参数是否存在
    if (!payload?.task?.attributes || !payload?.sid) {
        console.error('SendToVmTask 缺少必填参数');
        return;
    }

    const url: string = payload.task.attributes.transferToIvrUrl;
    const CallSid: string = payload.task.attributes.call_sid;
    const reservationSid = payload.sid;
    const transferToIVRMenu = 'vm';

    if (!url || !CallSid) {
        console.error('任务属性中缺少transferToIvrUrl或CallSid');
        return;
    }

    const reservation = manager.workerClient.reservations.get(reservationSid);
    if (!reservation) return;

    await reservation.accept();
    await reservation.wrap();
    await reservation.complete();
    await request(url, { CallSid, transferToIVRMenu });
});

2. 注入自定义按钮到任务栏 #

Flex会自动向TaskListButtons位置注入的自定义组件传递当前任务的task、reservation等上下文属性，直接从组件props中取值传入Action即可：

flex.DefaultTaskChannels.Call.addedComponents = [{
    target: "TaskListButtons",
    component: (props) => (
        <Flex.IconButton
            key="vm-button"
            icon="Voice"
            onClick={async () => {
                // 调用Action时传入当前任务上下文作为payload
                await flex.Actions.invokeAction("SendToVmTask", {
                    task: props.task,
                    sid: props.task.sid
                });
            }}
        />
    )
}];

原有代码的问题点 #

• 按钮onClick绑定逻辑错误：onClick={sendToVmButtonClick()}会在组件渲染阶段立刻执行函数，而非点击时触发，同时写法上没有接收组件上下文传入的任务参数
• Action调用未传参：flex.Actions.invokeAction的第二个参数为传入Action的payload，原有代码未传入任何参数，导致Action内部拿到的payload为undefined
• 多余的方法封装：不需要额外定义sendToVmButtonClick方法，直接在IconButton的onClick回调中处理逻辑即可，减少不必要的闭包嵌套

注意：请确保自定义Action的注册逻辑在添加按钮组件之前执行，避免点击按钮时提示Action不存在。

内容的提问来源于stack exchange，提问作者Ben Osborne