当我在同一问题中使用自定义过滤器以及本机和设计过滤器时,出现下一个错误
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;
}
至于引入此警告的原因,我们可以在此处看到,该更改旨在防止某些边缘情况,即可能会意外地将filteredValue
与onFilter
一起使用并中断其他列的过滤器。这个问题可以通过将filteredValue
更改为defaultFilteredValue
来解决,但决定添加警告。但是,在这种情况下,满足警告条件并不能保证正确的行为:为所有列设置filteredValue
会关闭警告,但不会使有问题的过滤器可用。
因此,回答您问题的第二部分是否有意义,这取决于在我的情况下,即使显示此警告,所有列过滤器也能正常工作。
简而言之:
确保filteredValue
为每列设置了字符串 | undefinedfilters