Question

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

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

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

我知道这可以通过测试（我在选择行并使用过滤器时使用的方法调用方法）。

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

将它置于componentWillRecieveProps中会导致无限循环（我假设由于上面提到的两行代码）。

我只需要运行方法ONCE（每次单击一个按钮）。经过一番探索后，我注意到我是否在

中添加了一个计数器

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

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

按下单击第二个，第三个等时间，这个方法将不再调用

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

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

有人可以提供一些建议吗？

Answer 1

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

在componentsWillRecieveProps中，我添加了这个：

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

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

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

如果有人有更优雅的方式来做上述事情，那么将不胜感激：）

react：在第二次调用componentWillRecieveProps后运行一个方法

1 个答案: