0

我的反应应用程序有一个主要的 ag-grid。它在单击按钮时重新呈现（提供新数据）。

我想添加一个最初过滤数据的预过滤器。所以我创建了一个新方法来创建我的预过滤器模型，然后应用它：

initialFilter(){
    ...
    this.state.gridOptions.api.setFilterModel(myView);
    this.state.gridOptions.api.onFilterChanged();
}

我知道这是通过测试工作的（我在选择行并应用过滤器时使用的方法上调用了该方法）。

问题是我在哪里调用该方法？

将其放入 componentWillRecieveProps 会导致无限循环（我假设是由于上面提到的两行代码）。

我只需要运行一次方法（每次单击按钮时）。经过一番探索，我注意到如果我添加一个计数器

componentWillRecieveProps(){
...
   if (counter <= 1){
      this.initialFilter();
      counter++;
   }
}

这会奏效。在第二次调用 componentWillRecieveProps 后，预过滤似乎起作用。不知道为什么，但我假设第一次是渲染 ag-grid，然后第二次，一旦渲染了网格，运行我的方法就可以了。（如果我使用 if 语句条件'counter == 0'，我不会看到我的 ag-grid 被过滤，我假设是因为某些内容被覆盖或没有要过滤的数据或其他东西）

当第二次，第三次等单击按钮时，这很好，该方法将不再调用

我最初的计划是让按钮 onclick 改变一个新的布尔状态变量，我的 IF 语句逻辑是：

'如果此状态布尔值为真，则等到第二次调用 componentWillRecieveProps，然后运行该方法，然后将布尔值设置为相反的值'

任何人都可以提供一些建议吗？

4

1 回答 1

0

我设法用一种更好的方法来修复它：

在 componentsWillRecieveProps 我添加了这个：

if (props.preFilter){
    this.initialFilter();
    counter++;
    if (counter == 2){
        props.preFilterWasApplied();
        counter=0;
    }
}

在我的父组件中，我设置了一个新状态来切换是否调用了这个 if 语句。单击按钮时，状态切换为 true。计数器最初设置为 0。initialFilter 方法运行并被忽略（？）但会让我再次调用 componentsWillRecieveProps。这会导致 initialFilter 再次运行（这次不会被忽略）并将计数器设置为 2。这将通过第二个 if 语句并调用父方法。父方法只是将状态切换回 false。计数器重置回 0 准备下一次单击按钮。

状态将继续保持为 false，直到我再次单击该按钮，并且在第二个 componentsWillReceiveProps 调用后再次设置回 false

如果有人有更优雅的方式来完成上述操作，那将不胜感激:)

于 2017-07-10T16:59:36.477 回答