在 resolve() 期间更改 React material-table 中的状态变量

Question

我创建了一个 Material-Table 具有以下选项：

options={{
    pageSize: 25,
    paging: true,
    pageSizeOptions: [25, 50, 100, 200],
    sorting: true,
    selection: true,
    search: false,
    headerStyle: {
    position: "sticky",
    top: 0,
    fontWeight: 800,
    textAlign: "center"
    },
    maxBodyHeight: "850px",
    draggable: true
    }}

如果输入文本过滤器，我会重新加载数据。 [注意 - 我不能使用内置的文本过滤器。我需要从数据库重新加载 table]。

loadTableWithFilter(filter) {      
  this.setState({ filterText: filter});
  //Set flag to indicate this is a table reload from first page
  this.setState({ reloadTableCustom: true });
  this.tableRef.current.onQueryChange();
}

标志 "reloadTableCustom" 用于指示整个 table 应在外部小部件中进行文本搜索后从头加载：

tableRef={this.tableRef}
onSelectionChange={data => this.selectionChanged(data)}
data={query =>
new Promise((resolve, reject) => {
     let url = "";
     url = 'My Webservice URL with page iptions'
     fetch(url).then(response => respose.json())
          .then(result => {
                var data = result.data;
                var pagenum = query.page;
                //If this table load is due to external filter
                //set to first page (0).
                if (this.state.reloadTableCustom === true) {
                     pagenum = 0;
                }
                //I set this flag to note that the page is reloaded due to a custom event.
                //Since it is reloaded, I reset this variable
                this.setState({ reloadTableCustom: false });
                resolve({
                    data: groups,
                    page: pagenum,
                    totalCount: result.totalElems
                 });
               });
       })
     }

当我使用这种方法时，组件会在每次事件后重新加载第二次，并且当我更改页面大小时，页面大小不会保留。检索到的数据大小是正确的，但页面大小仍然保持不变。

我在 render 方法之前删除了这一行并让它工作：

this.setState({ reloadTableCustom: false });

我使用此状态变量来区分 table 由于文本过滤器（触发远程[非本地] 文本搜索的自定义事件）和由于 table 事件（排序、分页等）。原因是在应用远程过滤器时加载 table 的第一页，而不是在应用 table 事件时加载活动页面。如果我不这样维护页码，table 会尝试加载其当前活动页面。如果结果比以前小，页面就会变成空白。

我的问题 - 为什么此状态更改会导致页面大小设置被删除？我如何区分 table 由分页事件和自定义事件引起的重新加载事件？

Answer 1

这就是我解决问题的方法。如果在material-table的resolve()方法中状态发生变化，会触发父组件重新加载，从而再次重新加载material- table 使用默认页面大小。这可以使用 shouldComponentUpdate 方法.

来控制

我覆盖了 shouldComponentUpdate 方法。我有一个标志"renderFlag"。在这个方法中，我检查 renderFlag 来决定是否应该重新加载组件。

shouldComponentUpdate(nextProps, nextState) {
   if (!renderFlag) {
      renderFlag = true;
      return false;
    } else {
       return true;
    }
}

更新状态时将标志设置为 false。

  //Set the flag to false. 
  renderFlag = false;
  //Update the state 
  this.setState({ reloadTableCustom: false });

这会阻止组件在状态更改时重新加载。

在 resolve() 期间更改 React material-table 中的状态变量

Changing state variable in React material-table during resolve()

javascript

reactjs

material-table