如何在ant design的“onFilter”中调用自定义函数？

Question

我想在列上的 ant design 给出的“onFilter”属性中调用自定义函数。我可以选择自定义过滤器下拉列表作为选项，但我想使用 ant design 提供的默认过滤器选项。IE

\n

{\n  title: 'Address',\n  dataIndex: 'address',\n  key: 'address',\n  filters: [{\n    text: 'London',\n    value: 'London',\n  }, {\n    text: 'New York',\n    value: 'New York',\n  }],\n  onFilter: (value, record) => record.address.indexOf(value) === 0,\n}\n

\n

但我在这里唯一需要更改的是一个自定义函数（它将触发 api 调用并在 redux 状态中设置新数据，以便组件将重新渲染它自己），例如

\n

{\n  ...\n  onFilter: (value, record) => this.getFilteredData(value),\n}\n

\n

但是当我这样做时，我得到了这个错误，这也很有意义。

\n

\n

警告: setState(\xe2\x80\xa6): 无法在现有状态转换期间更新\n

\n

\n

因此，请指导我如何做到这一点，因为我对反应和蚂蚁设计都是新手。

\n

Answer 1

在 onFilter 内分派一个动作可能不是一个好主意，因为它会在每次过滤器更改时被调用几次

但是您可以编辑您的减速器以设置filterLoading调用true此操作的时间getFilteredData，并且新的 onFilter 可以像这样

  ...
  onFilter: (value) => {
    if(! this.props.filterLoading) {
      this.getFilteredData(value);
    }
    return true;
  }

有几点需要考虑

• 您必须传递filterLoading给组件
• 不要忘记在调用操作时设置filterLoading为 falseGET_FILTERED_DATA_SUCCESS

希望这可以帮助