如何避免 Warning: [antd: Table] `FilteredKeys` 应该全部控制或者不控制

Question

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

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

我可以在创建 table 时仅在 ant design 过滤器上使用自定义过滤器来避免此警告，但也许有其他方法可以避免它，或者它只是库错误。

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

Answer 1

由于您没有演示您的代码，我只能展示我是如何解决我的案例中的相同问题的。

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

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

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

代码触发了与您收到的警告相同的警告。在documentation for the table component中只能说

Defining filteredValue or sortOrder means that it is in the controlled mode

而如果我们在堆栈中向下找到抛出它的文件，我们会找到下一个函数：

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;
}

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

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

如何避免 Warning: [antd: Table] `FilteredKeys` 应该全部控制或者不控制

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

reactjs

antd

ant-design-pro