SharePoint Framework WebPart React生命周期误用致列表切换失效

让我一步步帮你排查并解决这两个问题：

一、列表切换失效（始终显示GenericList） #

这个问题的核心是你的setSelectedList方法没有写完，而且缺少对原始列表数据的保存，导致无法正确更新选中的列表实例。

修复步骤： #

1. 添加私有变量保存原始列表数组
   在WebPart类里新增一个变量，用来存储从服务器加载的完整列表数据：

private _lists: List[]; // 新增：保存原始列表数组
private _dropdownOptions: IPropertyPaneDropdownOption[];
private _selectedList: List;
private _disableDropdown: boolean;
private _dataProvider: IDataProvider;
private _factorymethodContainerComponent: FactoryMethod;

2. 完善loadLists方法，保存原始列表
   修改loadLists，把获取到的lists数组保存到_lists中：

private loadLists(): Promise<any> {
  return this._dataProvider.getLists()
    .then((lists: List[]) => {
      this._lists = lists; // 保存原始列表数据
      this._disableDropdown = lists.length === 0;
      if (lists.length !== 0) {
        this._dropdownOptions = lists.map((list: List) => {
          return { key: list.Id, text: list.Title };
        });
      }
    });
}

3. 补全setSelectedList方法
   把截断的方法补全，确保选中列表后更新dataProvider的选中状态，并触发WebPart重新渲染：

private setSelectedList(value: string): void {
  // 从原始列表数组中找到选中的列表项
  this._selectedList = lodash.find(this._lists, (list: List) => list.Id === value);
  
  if (this._selectedList) {
    // 更新数据提供者的选中列表
    this._dataProvider.selectedList = this._selectedList;
    // 持久化选中的列表ID到WebPart属性
    this.properties.spListIndex = value;
    // 触发WebPart重新渲染，让组件获取新的列表数据
    this.render();
  }
}

二、页面无法渲染数据 #

这个问题大概率是组件没有正确响应列表变化，或者渲染逻辑有问题：

修复步骤： #

1. 修正WebPart的render方法
   你注释掉了正确的ReactDom.render调用，换成了错误的组件实例赋值，改回标准写法：

public render(): void {
  const element: React.ReactElement<IFactoryMethodProps> = React.createElement(
    FactoryMethod,
    {
      spHttpClient: this.context.spHttpClient,
      siteUrl: this.context.pageContext.web.absoluteUrl,
      listName: this._dataProvider.selectedList?.Title || "GenericList", // 可选链语法更简洁
      dataProvider: this._dataProvider,
      configureStartCallback: this.openPropertyPane
    }
  );
  // 恢复正确的渲染方式
  ReactDom.render(element, this.domElement);
}

2. 确保组件监听列表变化并重新加载数据
   在你的FactoryMethod组件中，需要在列表切换时重新获取数据。添加生命周期方法：

import { Component } from "react";
import { DetailsList } from "@fluentui/react";

class FactoryMethod extends Component<IFactoryMethodProps, { items: any[] }> {
  constructor(props: IFactoryMethodProps) {
    super(props);
    this.state = { items: [] };
  }

  public componentDidMount(): void {
    this._fetchListItems();
  }

  public componentDidUpdate(prevProps: IFactoryMethodProps): void {
    // 当选中的列表变化时，重新加载数据
    if (prevProps.listName !== this.props.listName) {
      this._fetchListItems();
    }
  }

  private async _fetchListItems(): Promise<void> {
    try {
      const items = await this.props.dataProvider.getItems();
      this.setState({ items });
    } catch (error) {
      console.error("加载列表项失败:", error);
    }
  }

  public render(): React.ReactNode {
    // 用state.items渲染Office UI Fabric DetailsList
    return (
      <DetailsList items={this.state.items} columns={/* 替换为你的列配置 */} />
    );
  }
}

3. 验证DataProvider的getItems方法
   确保你的SharePointDataProvider的getItems方法使用了选中的列表：

import { SPHttpClient } from "@microsoft/sp-http";

export default class SharePointDataProvider implements IDataProvider {
  public webPartContext: any;
  public selectedList: List;

  public async getItems(): Promise<any[]> {
    if (!this.selectedList) {
      return [];
    }
    const requestUrl = `${this.webPartContext.pageContext.web.absoluteUrl}/_api/web/lists/getbytitle('${encodeURIComponent(this.selectedList.Title)}')/items`;
    const response = await this.webPartContext.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1);
    const data = await response.json();
    return data.value;
  }

  // 其他已实现的方法...
}

最后检查 #

• 确保onInit方法中，loadLists完成后如果有选中列表，会触发渲染：
  在onInit的loadLists的then回调里，调用this.render()：

this.loadLists()
  .then(() => {
    if (this.properties.spListIndex) {
      this.setSelectedList(this.properties.spListIndex.toString());
      this.context.statusRenderer.clearLoadingIndicator(this.domElement);
      this.render(); // 新增：触发初始渲染
    }
  });

这样修改后，列表切换应该能正常生效，数据也会随着列表切换重新加载并渲染到DetailsList中。

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