React中点击按钮重置动态对象statusFilters为空时出现TypeError的解决方法

看起来你遇到的问题根源有两个关键点，咱们一步步理清楚：

1. 错误的重置值类型 #

从你的filterHandler代码能看出来，statusFilters是一个对象（你用了对象展开语法{ ...statusFilters, [e.target.name]: e.target.checked }来更新它），但你在resetAllFilters里却把它重置成了数组[]。这种类型不匹配会导致后续代码处理statusFilters时出错，更关键的是——如果父组件里的setStatusFilters期望接收对象类型的参数，传数组可能会引发连锁问题。

2. 确认setter函数的正确调用 #

错误提示TypeError: statusFilters is not a function说明你某个地方把状态对象statusFilters当成函数来调用了。检查你的resetAllFilters函数，确保你调用的是setStatusFilters（父组件传入的状态更新函数），而不是statusFilters（状态本身）。

正确的修复代码 #

把resetAllFilters改成这样：

const resetAllFilters = () => {
  // 如果你想清空所有筛选，设置为空对象
  setStatusFilters({});
  // 或者如果你想重置为默认筛选状态，用你之前定义的defaultFilterState
  // setStatusFilters(defaultFilterState);
};

另外，你的reset函数里有个小错误：setReset(!setStatusFilters)是把状态更新函数setStatusFilters当成布尔值取反，这显然不对，应该改成切换res的状态：

const reset = () => setReset(prev => !prev);

这样修改后，点击Reset按钮就能正确把statusFilters重置为空对象（或者默认状态），不会再出现类型错误了。

内容的提问来源于stack exchange，提问作者Teshie Ethiopia