在Twilio Flex Plugin v2中使用SideNav时遇`activeView is not defined`错误求助

错误原因 #

你遇到的activeView is not defined错误，是因为activeView变量未声明或未正确获取当前激活视图。另外代码中存在视图名称大小写不一致的问题：自定义View的name是taskView，但跳转时传入的是TaskView，这也会导致激活状态无法正常生效。

解决方法 #

方法1：直接通过Manager获取当前激活视图 #

修改SideLink的isActive属性，从manager.store读取当前激活视图，同时修正跳转视图名称的大小写：

import React from 'react';
import { FlexPlugin } from '@twilio/flex-plugin';
import TaskView from './components/TaskView/TaskView';
import { SideLink, Actions } from '@twilio/flex-ui';

const PLUGIN_NAME = 'TaskViewPlugin';

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

  async init(flex, manager) {
    flex.ViewCollection.Content.add(
      <flex.View name='taskView' key='TaskViewPlugin-component'>
        <TaskView key='TaskViewPlugin-component' />
      </flex.View>,
    );

    flex.SideNav.Content.add(
      <SideLink
        key='taskViewSideLink'
        icon='Supervisor'
        iconActive='SupervisorBold'
        // 从manager的store中获取当前激活视图
        isActive={manager.store.getState().flex.view.activeView === 'taskView'}
        onClick={() =>
          // 修正视图名称为小写，与自定义View的name保持一致
          Actions.invokeAction('NavigateToView', { viewName: 'taskView' })
        }
      >
        Pending Tasks
      </SideLink>,
      { sortOrder: 2 },
    );
  }
}

方法2：用Redux Connect包装SideLink（更推荐，支持状态自动更新） #

如果希望视图切换时自动更新激活状态，可以创建一个包装后的SideLink组件，通过connect订阅状态变化：

import React from 'react';
import { FlexPlugin } from '@twilio/flex-plugin';
import TaskView from './components/TaskView/TaskView';
import { SideLink, Actions, connect } from '@twilio/flex-ui';
import { bindActionCreators } from 'redux';

const PLUGIN_NAME = 'TaskViewPlugin';

// 创建连接Redux状态的SideLink组件
const ConnectedSideLink = connect(
  (state) => ({
    activeView: state.flex.view.activeView
  }),
  (dispatch) => ({
    navigateToView: bindActionCreators((viewName) => Actions.invokeAction('NavigateToView', { viewName }), dispatch)
  })
)(({ activeView, navigateToView }) => (
  <SideLink
    key='taskViewSideLink'
    icon='Supervisor'
    iconActive='SupervisorBold'
    isActive={activeView === 'taskView'}
    onClick={() => navigateToView('taskView')}
  >
    Pending Tasks
  </SideLink>
));

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

  async init(flex, manager) {
    flex.ViewCollection.Content.add(
      <flex.View name='taskView' key='TaskViewPlugin-component'>
        <TaskView key='TaskViewPlugin-component' />
      </flex.View>,
    );

    flex.SideNav.Content.add(
      <ConnectedSideLink />,
      { sortOrder: 2 },
    );
  }
}

关键注意事项 #

• 自定义View的name属性与NavigateToView的viewName必须完全一致（包括大小写），否则无法正确切换到目标视图。
• 方法2通过Redux connect实现状态订阅，视图切换时isActive会自动更新，比方法1更可靠。

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