React更新嵌套state数组报错：Cannot read properties of undefined (reading 'reports')

问题原因 #

你代码里有两个核心错误导致报错：

• useState未设置符合类型的初始值
  你声明useState<BankingObject>()时没有传入初始参数，所以bankingObject的初始值为undefined，直接读取undefined.reports自然会抛出属性读取错误。
• 状态更新写法存在闭包陷阱，且useCallback依赖缺失
  你的useCallback依赖数组为空，会导致回调始终捕获首次渲染时的bankingObject值（也就是初始的undefined），就算后续状态更新过也拿不到最新值。同时直接在setBankingObject里引用当前状态值，短时间多次触发更新还可能出现状态丢失的问题。

修正方案 #

1. 给useState添加初始值 #

你的BankingObject类型定义里reports和loading都是必填属性，直接传入符合要求的初始值即可：

// 变量名建议遵循小驼峰规范，set后首字母大写
const [bankingObject, setBankingObject] = useState<BankingObject>({
  reports: [],
  loading: false
})

2. 改用函数式状态更新，补全依赖 #

函数式更新可以直接拿到最新的状态值，不需要把bankingObject加入依赖数组，彻底避开闭包问题：

const newReport = useCallback(async() => {
  const { data } = await createBankingReport({ account_id })

  setBankingObject(prevState => ({
    ...prevState,
    reports: [...prevState.reports, data.newBankingReport]
  }))
// 仅需把外部变量account_id加入依赖
}, [account_id])

如果你的业务逻辑中bankingObject初始确实可能为undefined，可以加可选链兜底避免报错：

reports: [...(prevState?.reports ?? []), data.newBankingReport]

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