当 SPFX 属性面板属性改变时重新调用 api

Question

这可能是一个非常愚蠢的问题，但就这样吧。

我的“属性”窗格中有一个下拉字段，其中填充了当前站点的所有列表。这工作没问题。

当我更改下拉列表时，我会使用列表的 ID 填充属性。在我的反应组件中，我称之为以下

public componentDidMount(){
     var url = this.props.webUrl + "/_api/web/lists(guid'"+ this.props.listId+"')/items";
     console.log("LIST API = " + url);
     var getListInfo: FetchListData = new FetchListData();
      getListInfo.getItems(url, this.props.client).then((data) => {

         this.setState({ navItems: data });
      })
  }`

我的假设是，当 Web 部件最初加载时，组件会渲染到页面上，但如果我更新属性，则不会调用此 componentDidMount，因为从技术上讲，它已经安装了。

我想做的是在更改列表（下拉属性）后让组件重新渲染。我目前所拥有的将起作用，因为一旦保存页面，它将呈现出所有检索到的项目。我只是假设有一种方法可以让它变得动态。

我对 React 的经验至少可以说是基本的，所以任何方向都是完美的。

干杯

特鲁兹

Answer 1

在研究了 React 页面周期后发现了这一点。

componentDidUpdate(prevProps, prevState) {
  //If statement checking if your property or state has changed.
  //Re run API call 
}

干杯

特鲁兹

Answer 2

如果您专门寻找 SPFX，那么以下方法将是检测 webpart*.ts 文件内的 on-change 属性的绝佳选择。

protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void {
    /* if(propertyPath === 'smt'){
         /call your appl
      }

    */
    console.log("onPropertyPaneFieldChanged", {propertyPath, oldValue, newValue});
  }