SharePoint列表绑定DropdownList初始为空点击后显示异常问题

你的问题核心在于异步数据获取和组件渲染的时机不匹配，具体有两个关键问题：

1. WebPart层没有管理异步数据状态：getDropList方法里调用了异步的_getData()，但直接同步返回了空数组。当Promise完成、数据真正填充到dropList时，WebPart并没有触发重新渲染，所以React组件一直拿着初始的空数组。只有当Dropdown的点击操作触发组件重渲染时，才可能碰巧拿到已经填充好的数据（但这不是可靠的触发方式）。

2. React组件没有响应props更新：drop组件在构造函数里把props.dropList赋值给了实例变量dropOption，但构造函数只执行一次。即使后续WebPart的props更新了，组件也不会自动更新dropOption，更不会重新渲染Dropdown的选项。

我们分两步来解决这个问题：

第一步：修改WebPart，管理异步数据状态 #

让WebPart维护下拉选项的状态，当数据获取完成后触发重新渲染：

export default class DropWebPart extends BaseClientSideWebPart<IDropPartProps> {
  // 添加私有状态变量存储下拉选项
  private _dropList: IDropdownOption[] = [];

  constructor() {
    super();
  }

  // 在WebPart初始化时获取数据
  protected async onInit(): Promise<void> {
    await super.onInit();
    // 获取数据并更新状态
    const data = await this._getData();
    this._dropList = data.map(itemc => ({ key: itemc.Categorie, text: itemc.Key }));
    // 触发重新渲染
    this.render();
  }

  public render(): void {
    const element: React.ReactElement<IFaqProps> = React.createElement(drop, {
      // 直接传递已准备好的_dropList
      dropList: this._dropList
    });
    ReactDom.render(element, this.domElement);
  }

  public _getData(): Promise<IOptionCategorie[]> {
    return sp.web.lists
      .getByTitle("Option")
      .items.select("Key", "Option")
      .get();
    // 这里不需要额外的then，直接返回Promise即可
  }
}

关键改动说明： #

• 新增_dropList变量存储选项数据，作为WebPart的状态
• 把数据获取逻辑移到onInit生命周期方法里，用async/await处理异步操作
• 数据获取完成后，转换格式并赋值给_dropList，然后调用this.render()触发重新渲染，确保React组件拿到最新的数据

第二步：修改React组件，响应props变化 #

让React组件直接使用props里的dropList，或者监听props变化更新内部状态：

export default class drop extends React.Component<IDropProps> {
  constructor(props: IDropProps) {
    super(props);
    this.state = { selectedItem: undefined };
  }

  // 监听props变化，当dropList更新时可以做额外处理（可选）
  componentDidUpdate(prevProps: IDropProps) {
    if (prevProps.dropList !== this.props.dropList) {
      // 如果需要，可以在这里处理数据更新后的逻辑，比如重置选中项
      // this.setState({ selectedItem: undefined });
    }
  }

  public render(): JSX.Element {
    const { selectedItem } = this.state;
    // 直接使用props里的dropList，不要用构造函数里的实例变量
    const { dropList } = this.props;

    return (
      <div>
        <FocusZone direction={FocusZoneDirection.vertical}>
          <Dropdown
            className={classNames.dropDown}
            label=""
            selectedKey={selectedItem ? selectedItem.key : ""}
            onChange={this._onChange}
            options={dropList}
          />
          {/* liste */}
        </FocusZone>
      </div>
    );
  }

  private _onChange = (
    event: React.FormEvent<HTMLDivElement>,
    item: IDropdownOption
  ): void => {
    this.setState({ selectedItem: item });
  };
}

关键改动说明： #

• 移除了实例变量dropOption，直接在render里使用this.props.dropList，确保每次渲染都拿到最新的props数据
• 添加componentDidUpdate钩子（可选），如果需要在数据更新时执行额外逻辑（比如重置选中项），可以在这里处理

• WebPart在初始化时就完成了数据获取，更新状态后主动触发重新渲染，确保React组件第一次渲染时就能拿到完整的选项数据
• React组件直接依赖props，每次props更新都会重新渲染Dropdown，选项会自动更新，不需要等待用户点击

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