Azure DevOps UI Dropdown组件报错：Cannot read 'delegate' of undefined

我在学习Azure DevOps UI的Dropdown组件，代码和官方示例完全一致。执行npm start启动项目后，点击下拉选项时会抛出错误：Uncaught TypeError: Cannot read properties of undefined (reading 'delegate')。排查后发现onSelect函数能正常运行，但错误似乎来自Dropdown的重新加载环节。我搜索了React ObserverBase相关问题，没找到有效解决办法。

以下是我的代码：

import * as React from "react";
import { Dropdown } from "azure-devops-ui/Dropdown";
import { IListBoxItem } from "azure-devops-ui/ListBox";
import { Observer } from "azure-devops-ui/Observer";
import { ObservableValue } from "azure-devops-ui/Core/Observable";

export default class BasicDropdownExample extends React.Component {
    private selectedItem = new ObservableValue<string>("");

    public render() {
        return (
            <div className="flex-row" style={{ margin: "8px", alignItems: "center" }}>
                <Dropdown
                    ariaLabel="Basic"
                    className="example-dropdown"
                    placeholder="Select an Option"
                    items={[
                        { id: "item1", text: "Item 1" },
                        { id: "item2", text: "Item 2" },
                        { id: "item3", text: "Item 3" }
                    ]}
                    onSelect={this.onSelect}
                />
                <Observer selectedItem={this.selectedItem}>
                    {(props: { selectedItem: string }) => {
                        return (
                            <span style={{ marginLeft: "8px", width: "150px" }}>
                                Selected Item: {props.selectedItem}{" "}
                            </span>
                        );
                    }}
                </Observer>
            </div>
        );
    }

    private onSelect = (event: React.SyntheticEvent<HTMLElement>, item: IListBoxItem<{}>) => {
        this.selectedItem.value = item.text || "";
    };
}

可能的解决方法 #

1. 为Dropdown绑定选中值
   代码中未将Dropdown的选中状态与selectedItem同步，可能导致组件重渲染时出现上下文异常。给Dropdown添加selectedValue属性，绑定到this.selectedItem.value：

   <Dropdown
       ariaLabel="Basic"
       className="example-dropdown"
       placeholder="Select an Option"
       items={[
           { id: "item1", text: "Item 1" },
           { id: "item2", text: "Item 2" },
           { id: "item3", text: "Item 3" }
       ]}
       selectedValue={this.selectedItem.value}
       onSelect={this.onSelect}
   />
   

   这样Dropdown的选中状态会和ObservableValue保持同步，避免重渲染时的内部状态冲突。

2. 检查Azure DevOps UI版本兼容性
   确认项目中azure-devops-ui的版本与官方示例一致。版本不匹配可能导致内部组件API差异，引发此类错误。可查看官方文档对应版本，执行以下命令更新或锁定版本：

   npm install azure-devops-ui@<指定版本号>
   

3. 修正ListBoxItem的泛型类型
   当前IListBoxItem泛型使用{}，建议改为与选中值匹配的string类型，确保类型一致性：

   private onSelect = (event: React.SyntheticEvent<HTMLElement>, item: IListBoxItem<string>) => {
       this.selectedItem.value = item.text || "";
   };
   

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