如何避免警告:[antd:表]"过滤键"应该全部控制或不控制



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

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

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

我发现开发人员说这不是错误并且问题已关闭的主题,但是 为什么我在项目构建和开发中收到红色警告。还行?

由于您尚未演示代码,因此我只能展示我如何在我的情况下解决相同的问题。

最初,我的列的过滤器是这样设置的:

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

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

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

简而言之:

确保filteredValue每列设置了字符串 | undefinedfilters

最新更新