SPFX属性面板属性变更时调用API的实现问询

嗨，这个场景我太熟悉了！你现在只在componentDidMount里调用API，但属性面板切换选项时组件会收到新的props，咱们可以通过监听props的变化来触发API调用，具体步骤如下：

1. 把API调用逻辑抽成独立方法 #

首先把原本写在componentDidMount里的API调用代码抽成一个单独的类方法，这样可以在多个生命周期里复用，避免重复代码：

private fetchListItems = async (): Promise<void> => {
  // 先做个判断，如果listId为空就直接返回
  if (!this.props.listId) return;

  try {
    const url = `${this.props.webUrl}/_api/web/lists(guid'${this.props.listId}')/items`;
    console.log("LIST API = " + url);
    
    // 这里放你的FetchListData逻辑
    const getListInfo = new FetchListData();
    const listItems = await getListInfo.getItems(url);
    // 后续处理获取到的列表数据，比如更新组件state
    this.setState({ items: listItems });
  } catch (error) {
    console.error("获取列表数据失败:", error);
  }
};

2. 在componentDidMount中调用这个方法 #

保留你原本的初始化调用，确保组件挂载时能加载默认选中列表的数据：

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

3. 使用componentDidUpdate监听listId的变化 #

React的componentDidUpdate方法会在组件props或state更新后触发，我们在这里判断listId是否发生了变化，如果变了就重新调用API：

public componentDidUpdate(prevProps: IYourComponentProps): void {
  // 对比当前props和之前的props，只有listId变化时才调用API
  if (this.props.listId !== prevProps.listId) {
    this.fetchListItems();
  }
}

4. 可选：处理内存泄漏（避免组件卸载后还在请求） #

为了防止组件卸载后API请求还在进行导致报错，可以添加一个实例变量来跟踪组件是否挂载：

private isMounted: boolean = false;

public componentDidMount(): void {
  this.isMounted = true;
  this.fetchListItems();
}

public componentWillUnmount(): void {
  this.isMounted = false;
}

// 然后在fetchListItems里添加判断
private fetchListItems = async (): Promise<void> => {
  if (!this.props.listId || !this.isMounted) return;

  try {
    const url = `${this.props.webUrl}/_api/web/lists(guid'${this.props.listId}')/items`;
    console.log("LIST API = " + url);
    
    const getListInfo = new FetchListData();
    const listItems = await getListInfo.getItems(url);
    
    // 只有组件还挂载时才更新state
    if (this.isMounted) {
      this.setState({ items: listItems });
    }
  } catch (error) {
    console.error("获取列表数据失败:", error);
  }
};

这样一来，每当你在属性面板切换下拉选项、listId属性更新时，组件就会自动调用新列表的API，加载对应的数据啦！

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