如何解决antd Table触发`FilteredKeys`受控或非受控混用警告
警告触发原因
该警告是antd Table的内置状态校验逻辑触发的,并非组件库bug:Table要求所有带筛选功能的列的filteredKeys属性必须完全受控或者完全不受控,不允许出现部分列手动传入filteredKeys、部分列交由组件内部管理的混合状态。你同时使用自定义筛选和原生筛选时,通常是给自定义筛选的列手动配置了filteredKeys,原生筛选的列未配置,刚好触发了这一校验规则。
可行规避方案
- 改为完全受控模式:给所有带筛选功能的列(包括原生筛选列)都手动传入
filteredKeys属性,将所有列的筛选状态统一存储在业务侧的state中,在Table的onChange回调中统一处理所有筛选键的更新逻辑,保证没有列的筛选状态由Table内部管理即可。 - 改为完全不受控模式:自定义筛选列也不手动传入
filteredKeys,所有列的筛选状态都交由Table内部管理,自定义筛选逻辑可以通过列的filterDropdown属性注入到筛选面板中,内部会自动完成状态同步。 - 临时屏蔽警告(不推荐):如果确实需要保留混合使用模式,可以配置React的警告过滤规则,单独屏蔽该条特定警告,但是该操作可能会掩盖其他真实的状态配置错误。
红色警告说明
开发、构建环节出现红色警告属于正常情况,antd的组件使用规范警告默认会以错误级别的日志输出,用来强提醒开发者遵循使用规则,本身不会影响功能正常运行,如果你的CI流程配置了控制台警告阻断构建,才会对上线流程产生影响,建议优先按照前两种方案修正配置。
内容的提问来源于stack exchange,提问作者DevOverflow
相关产品推荐
相关产品推荐

