如何避免警告：[antd：Table]`FilteredKeys`应该全部受控或不受控

Question

当我在同一问题中使用自定义过滤器以及本机和设计过滤器时，我收到下一个错误

Warning: [antd: Table] `FilteredKeys` should all be controlled or not controlled.

创建表时，我可以在 ant design 过滤器上使用自定义过滤器来避免此警告，但也许有一种方法可以以不同的方式避免它，或者这只是库错误。

我发现开发人员说这不是错误并且问题已解决的主题，但为什么我在项目构建和开发中收到红色警告。没关系？

Answer 1

由于您尚未演示您的代码，因此我只能展示如何在我的案例中解决相同的问题。

最初，我的列的过滤器设置如下：

for (let col of columns) {
  if (!filter[col.key])
    continue;

  col.filteredValue = filter[col.key].value || null;
}
  

该代码触发了与您收到的相同的警告。在表格组件的文档中仅提到

定义filteredValue或sortOrder表示处于受控模式

然而，如果我们沿着堆栈向下查找抛出它的文件，我们将找到下一个函数：

var mergedFilterStates = React.useMemo(function () {
    var collectedStates = collectFilterStates(mergedColumns, false);
    var filteredKeysIsNotControlled = collectedStates.every(function (_ref5) {
      var filteredKeys = _ref5.filteredKeys;
      return filteredKeys === undefined;
    }); // Return if not controlled

    if (filteredKeysIsNotControlled) {
      return filterStates;
    }

    var filteredKeysIsAllControlled = collectedStates.every(function (_ref6) {
      var filteredKeys = _ref6.filteredKeys;
      return filteredKeys !== undefined;
    });
    (0, _devWarning["default"])(filteredKeysIsNotControlled || filteredKeysIsAllControlled, 'Table', '`FilteredKeys` should all be controlled or not controlled.');
    return collectedStates;
  }, [mergedColumns, filterStates]);

简而言之，检查所有列过滤器是否受控 ( column.filteredValue !== undefined) 或不受控 ( column.filteredValue === undefined)。

因此，为了摆脱警告，我指出我的所有列过滤器都受到控制（即使它们在这个特定时刻没有被过滤，但它们也不是undefined）：

for (let col of columns) {
  col.filteredValue = (filter[col.key] || {}).value || null;
}

至于引入此警告的原因，我们可以在这里看到，此更改旨在防止某些边缘情况，即人们可能会意外地与其他列filteredValue一起使用onFilter并破坏其他列的过滤器。filteredValue该问题可以通过更改为 来解决defaultFilteredValue，但决定添加警告。但是，在这种情况下，满足警告条件并不能保证正确的行为：对所有列进行设置filteredValue会关闭警告，但不会使有问题的过滤器变得可用。

因此，回答问题的第二部分是否此警告有意义，这取决于在我的情况下，即使显示此警告，所有列过滤器也能正常工作。