React报错setStatusFilters is not a function排查与修复

触发Uncaught TypeError: setStatusFilters is not a function at resetAllFilters的核心原因是**ObjectList组件没有接收到有效函数类型的setStatusFilters属性**，具体问题点：

• TrackingPage渲染ObjectList时通过{...props}透传上层属性，但TrackingPage本身没有定义statusFilters、setStatusFilters相关状态，透传的属性中根本不存在setStatusFilters字段，子组件拿到的值是undefined，调用时自然抛出类型错误。
• 现有代码存在逻辑断层：TrackingFilterContainer筛选组件没有绑定状态更新方法，用户选择筛选条件时不会修改statusFilters值，就算修复重置函数报错，筛选功能本身也无法正常工作。
• ObjectList中存在无效逻辑：const reset = () => setReset(!setStatusFilters);将setStatusFilters做布尔取反后传入state setter，没有实际业务作用，属于冗余代码。

第一步：在TrackingPage组件中定义筛选相关状态 #

在TrackingPage组件内部和其他useState同级位置，声明筛选状态和对应的更新方法，不要依赖上层透传的未知属性：

const [statusFilters, setStatusFilters] = useState([]);
// 组件props中声明了setStatusCheckboxFilters，在这里同步定义
const [statusCheckboxFilters, setStatusCheckboxFilters] = useState({});

第二步：修正属性传递逻辑 #

1. 修改TrackingPage中resultObjs的计算逻辑，直接使用本组件定义的statusFilters，不要从props中取值：

const resultObjs = filterSearch(filterObjects(trackingObjects, statusFilters), objectListSearch);

2. 删掉ObjectList、Map组件上的{...props}透传写法，显式传入需要的属性，避免透传未知属性导致的异常：

<ObjectList
    search={objectListSearch}
    setSearch={setObjectListSearch}
    selectedObj={selectedObject}
    setSelectedObj={setSelectedObject}
    trackingObjects={trackingObjects}
    loading={loading}
    error={error}
    statusFilters={statusFilters}
    setStatusFilters={setStatusFilters}
    setStatusCheckboxFilters={setStatusCheckboxFilters}
/>

3. 给ObjectList内的TrackingFilterContainer组件绑定状态和更新方法，让筛选操作可以正常修改状态：

<TrackingFilterContainer
    defaultFilterState={defaultFilterState}
    filterOptionsObj={filterOptionsObj}
    statusFilters={statusFilters}
    setStatusFilters={setStatusFilters}
    statusCheckboxFilters={statusCheckboxFilters}
    setStatusCheckboxFilters={setStatusCheckboxFilters}
/>

4. 同步修改Map组件的属性传递，传入本组件定义的statusFilters相关属性即可。

第三步：清理ObjectList中的冗余代码 #

删掉ObjectList组件内无效的reset相关代码：

// 删除以下两行无用逻辑
const [res, setReset] = useState(false);
const reset = () => setReset(!setStatusFilters);

第四步：完善重置逻辑（可选） #

如果需要重置到默认筛选状态而非清空为空白数组，可以调整resetAllFilters逻辑，复用已经计算好的默认筛选值：

const resetAllFilters = () => {
    setStatusFilters(defaultFilterState);
    // 存在复选框类筛选条件时可在此处同步重置
    // setStatusCheckboxFilters(/* 对应默认值 */)
};

修改完成后可按以下顺序校验：

• 点击无匹配结果页的Back按钮，控制台不再抛出类型错误
• 筛选条件可以正常重置，列表恢复全量数据展示
• 选择不同筛选条件时，列表可以正常过滤对应数据

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