React调用setFilters更新状态时报错无法读取undefined的sortBy属性

问题表现 #

开发React.js功能时，已在useState初始值中明确定义sortBy字段，执行状态更新时仍抛出以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'sortBy')

涉及的初始实现代码：

let [filters, setFilters] = useState({
   search: '',
   sortBy: null,
   filter: null,
   pageNumber: '1',
   pageSize: '10',
});

if (filters.sortBy === null) {
   const newFiltering = { ...filters, sortBy: {} }
   newFiltering.sortBy[target] = '1'
   setFilters({ ...newFiltering })
}

尝试简化为单行更新逻辑后问题依然存在：

setFilters({ ...filters, sortBy: { [target]: '1' } })

报错触发时机为setFilters执行阶段，和代码中使用的target变量存在关联。

根本原因 #

报错和filters状态本身的定义无关，核心问题是代码中使用的target变量未在当前作用域定义：

• 当JS执行到包含[target]的计算属性逻辑时，会优先读取target变量的值用于生成属性名，未定义的target会触发引用错误
• React开发环境下的错误栈存在错位现象，会把这个未定义变量的读取错误，错误标记为读取sortBy属性失败，和实际触发问题的代码位置不匹配
• 常见触发场景：在排序按钮的点击回调中写这段逻辑时，忘记从事件对象、函数入参中取出对应排序字段名赋值给target，直接使用了不存在的变量。

修复方案 #

• 第一步：在执行状态更新的作用域内，先明确定义target变量，赋值为你需要的排序字段值。比如从点击事件的DOM dataset、组件入参中获取对应字段，确保target是有效的字符串值后再执行状态更新。
• 第二步：将状态更新改为函数式写法，避免异步场景下闭包捕获旧的filters值导致更新异常，参考代码如下：

// 示例：排序按钮点击回调
const handleSortClick = (e) => {
  // 提前从事件对象中取出要排序的字段，赋值给target
  const target = e.currentTarget.dataset.sortKey;
  setFilters(prevFilters => {
    // 基于前一次的最新状态做更新，避免闭包问题
    if (prevFilters.sortBy === null) {
      return {
        ...prevFilters,
        sortBy: { [target]: '1' }
      }
    }
    // 若sortBy已有值，保留原有排序规则再追加新的排序字段
    return {
      ...prevFilters,
      sortBy: { ...prevFilters.sortBy, [target]: '1' }
    }
  })
}

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